Lecture_3_More_Basic_HTML_CSS (1)

Lecture 3More Basic HTML/CSS Web 2.0 Programming(based on CSE190m of University of Washington)(based on CSE 190m of University of Washington)--ericwangqing@Web 2.0 Programming –More Basic HTML/CSS Outline●More HTML ElementsM B i CSS●More Basic CSS●More CSSWeb 2.0 Programming –More Basic HTML/CSS Web page metadata: <meta><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Authors' web site for Building JavaPrograms"/>Programs. /><meta name="keywords" content="java, textbook" />XHTML●placed in the head of your XHTML pagetags often have both the and●meta tags often have both the name and contentattributes•some tags use the http-equiv attribute instead ofsome meta tags use the http equiv attribute instead of name●using a meta tag for Content-Type get rid of validatory g“tentatively valid” warningsWeb 2.0 Programming –More Basic HTML/CSS Definition list: <dl>, <dt>,<dd>dl represents a list of definitions of terms(block)dt represents each term, and dd its definitionrepresents each term and its definition <dl><dt>newbie</dt><dd>one who does not have mad skills</dd><dt>own</dt><dd>to soundly defeat(e.g. I owned that newbie!)</dd><dt>frag</dt> <dd>a kill in a shooting game</dd></dl>HTML newbieone who does not have mad skillsownto soundly defeat (e.g. I owned that newbie!)t dl d f t(I d th t bi!)fraga kill in a shooting gamea kill in a shooting gameoutputa lengthy quotation (block)<p>As Lincoln said in his famous Gettysburg Address:</p><blockquote>Fourscore and seven years ago our fathers brought forth on <p>Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal.</p></blockquote>HTML As Lincoln said in his famous Gettysburg Address:Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived in liberty, andd di t d t th iti th t ll t d ldedicated to the proposition that all men are created equal.outputa short quotation (inline )the Raven Nevermore <p>Quoth the Raven, <q>Nevermore.</q></p>HTMLthe Raven “Nevermore”Quoth the Raven, Nevermore .outputWhy not just write the following?●Why not just write the following?●<p>Quoth the Raven, "Nevermore."</p>●We don’t use “mark for two reasons:●XHTML shouldn’t contain literal quotation mark qcharacters; they should be written as &quot;using allows us to apply CSS styles to ●using <q>allows us to apply CSS styles to quotationsWeb 2.0 Programming –More Basic HTML/CSS HTML character entitiesa way of representing any Unicode character within a Web pagecharacter (s)entity< >&lt; &gt;é è ñ&eacute; &egrave; &ntilde;™ ©&trade; &copy;πδΔ&pi; &delta; &Delta;И&#1048;;" &&quot; &amp;●Complete list of HTML entities●How would you display the text &amp; on a web page?Web 2.0 Programming –More Basic HTML/CSS HTML-encoding text&lt;p&gt; &lt;ahref=&quot;/search?q=marty&amp;ie=utf-8&amp;aq=t&quot;&gt;Search Google for Marty &lt;/a&gt; &lt;/p&gt;HTML <p> <a href="/search?q=marty&ie=utf-8&aq=t"> Search Google for Marty </a> </p>output To display the link text in a Web page its specialTo display the link text in a Web page, its special characters must be encoded as shown abovecode: a short section of computer code(usually rendered in a fixed-width font)rendered in a fixed-width font)<p>The <code>ul</code>and <code>ol</code>tags make lists.</p> HTML The ul and ol tags make lists.outputa large section of pre-formatted text (block)<pre>Steve Jobs speaks loudlyreality distortionA l f b dApple fans bow down</pre>HTMLSteve Jobs speaks loudlySte e Jobs speaks lo dlreality distortionApple fans bow down output ●displayed with exactly the whitespace / line breaks givenin the text●shown in a fixed-width font by default●how would it look if we had instead enclosed it in codetags?●More HTML Elements M B i CSS●More Basic CSS●More CSSp, h1, h2 {color: green;}h2 {background-color:yellow;background color: yellow;}CSS p g p yThis paragraph uses the above style.This h2 uses the above style.output ●a style can select multiple elements separated by commas●the individual elements can also have their own style (like h2above)t l(lik b)/* This is a comment.It can span many lines in the CSS file. */p {color: red;background-color:aqua;background color: aqua;}CSS CSS(like HTML)is usually not commented as●CSS (like HTML) is usually not commented as rigorously as programming languages such as Java th i l li t t l i t d i ●the //single-line comment style is NOT supported in CSS●the <!--… -->HTML comment style is also NOT supported in CSSproperty descriptiontext-align alignment of text within its element text-decoration decorations such as underlining gline-height, word spacing gaps between the various portionsword-spacing,letter-spacingof the texttext-indentindents the first letter of eachparagraphComplete list of text propertiestext-align can be left, right, center, or justify(which widens all full lines of the element so that they occupy its entire all full lines of the element so that they occupy its entirewidth)●can also beeffects can be combined:●effects can be combined:•text-decoration: overline underlineWeb 2.0 Programming –More Basic HTML/CSS The list-style-type propertyol{ list-style-type: upper-roman }CSS P ibl l N kPossible values: none : No markerI.disc (default), circle, squareII.decimal : 1, 2, 3, etc.III.decimal-leading-zero : 01, 02, 03, etc.IV.lower-roman : i, ii, iii, iv, v, etc.V.upper-roman : I, II, III, IV, V, etc.VI.lower-alpha : a, b, c, d, e, etc.VII.upper-alpha : A, B, C, D, E, etc.VIII.lower-greek: alpha, beta, gamma, etc.IX.others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha●More HTML Elements M B i C●More Basic Css●More CSSbody{ font-size: 16px; }CSS●to apply a style to the entire body of your page, write ayselector for the body element●saves you from manually applying a style to each elementit’s called Cascading Style Sheets because the properties of an element cascade together in this order:of an element together in this order:•browser’s default styles•external style sheet files (in a <link> tag)y(g)•internal style sheets (inside a <style>tag in the page’s header)•inline style (the style attribute of the HTML element)Web 2.0 Programming –More Basic HTML/CSS Inheriting styles (explanation)●when multiple styles apply to an element, they areinherited● a more tightly matching rule can override a more generalinherited ruleinherited rule●not all properties are inherited (notice link’s color above)Web 2.0 Programming –More Basic HTML/CSS Styles that conflict●when two styles set conflicting values for the sameproperty, the latter style takes precedencet th l tt t l t k d●(later we will learn about more specific styles that canoverride more general styles)override more general styles)Web 2.0 Programming –More Basic HTML/CSS W3C CSS Validator<p><a href="/css-validator/check/referer">src="http://jigsaw w3org/css validator/images/vcss"HTML<img src=/css-validator/images/vcss alt="Valid CSS!" /></a>/</p>jigsaw w3org/css-validator/output●/css validator/●checks your CSS to make sure it meets the official CSSspecifications●more picky than the web browser, which may rendermalformed CSS correctly yWeb 2.0 Programming –More Basic HTML/CSS CSS properties for backgroundsp p y pproperty descriptionbackground-color color to fill backgroundbackground-image image to place in background background-position placement of bg image within element background-repeat whether/how bg image should be repeated background-attachment whether bg image scrolls with pagedraft.jpgbackground image/color fills the element’s content areacan be repeat(default), repeat-x, repeat-y, or no-repeat●value consists of two tokens, each of which can be top,left, right, bottom, center, a percentage, or a length value in px, pt, etc.●value can be negative to shift left/up by a given amountWeb 2.0 Programming –More Basic HTML/CSS Favorites icon (“favicon”)●the link tag, placed in the HTML page’s head section, canspecify an icon for a Web page.●IE6: this doesn’t work; must place a file in .ico formatnamed favicon.ico in the root directory of the Web server (instructions)i t ti●More HTML Elements •tmeta •dl , dt , ddblockq ote •blockquote , q•HTML character entities, HTML-encoding text•code , pre●More Basic CSS •i t lgrouping style •commentst t ti t t li t t d ti•text properties: text-align , text-decoration •list-style-typeMore CSS •b d t l body styles •cascading vs. inherit conflict resol e •conflict resolve •W3C CSS validator background properties:background image background •background properties: background-image , background-repeat , background-position •favorites icon favorites icon。