web-page design with html/cssfwp/lecture06/slides06.pdf · css main idea: changing the style sheet...
TRANSCRIPT
![Page 1: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/1.jpg)
Web-page design with HTML/css
![Page 2: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/2.jpg)
![Page 3: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/3.jpg)
Computer languagesProgramming languages:
asm, C, C++, Java, Python, Ruby, Javascript, PHP, SQLImplement algorithms that generate or operate on data, using loops, functions, variables,…
Descriptive languages: HTML, CSS, data-base description languagesOrganize data or information.
Why not use Javascript etc to organize data? Arrays, strings,…
![Page 4: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/4.jpg)
Fetching pages1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail including the document. 4. You use Word to view the document.
1. A server has a document (.html) 2. You use your browser to request the document 3. The server sends a message to your computer
including the document. 4. You use your browser to view the document.
server
client
server
client
server
client
server
client
![Page 5: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/5.jpg)
Why coders hate Word: content vs. style
![Page 6: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/6.jpg)
HTML describes contentYou write: Browser displays:
Tag pair
![Page 7: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/7.jpg)
HTML describes contentYou write: Browser displays:
Tag pair
![Page 8: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/8.jpg)
Header tags: h1..h6
![Page 9: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/9.jpg)
Exercise: headers<h1> The Constitution of the United States </h1>
<p> <strong>We the People</strong> of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.</p>
<h2> Article. I. </h2>
<h3> Section. 1. </h3>
<p>All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.</p>
<h3> Section. 2. </h3>
<p>The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.</p>
![Page 10: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/10.jpg)
Why not use Dreamweaver?
You can.
But understand:
1) The building blocks (tags) 2) Style vs content 3) Clean HTML code
Personally, I prefer to edit HTML directly for the speed. No software to learn, no fonts to choose.
![Page 11: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/11.jpg)
Nested tags
Malformed HTML: <p> <strong> </p> </strong>
![Page 12: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/12.jpg)
Complete HTML documentsHead, not displayed (SEO)
Body, where text goes
“This is HTML (5)”
![Page 13: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/13.jpg)
HTML validation
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.bloomberg.com%2F
![Page 14: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/14.jpg)
ListsUnordered <ul></ul> (why not call it bullet?)
Ordered <ol></ol>
Note nesting
![Page 15: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/15.jpg)
Exercise: tables
![Page 16: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/16.jpg)
Images
• No closing </img> • src=“https://www….” • style=“width:128px; height:128px;”
Attributes
Wait, style? Isn’t it bad to combine style and content?
![Page 17: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/17.jpg)
Links
href parameter gives target of link.
![Page 18: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/18.jpg)
Exercise: space
![Page 19: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/19.jpg)
iframesiframes allow you to embed a web page inside another page
![Page 20: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/20.jpg)
Who owns your content?• Where are your <img> files stored?
• What happens if they change? Or disappear? • Who pays for bandwidth? • Who owns copyright on the site?
• Are you using iframes? • Can someone play an ad or control experience?
![Page 21: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/21.jpg)
Style with CSS
![Page 22: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/22.jpg)
CSSMain idea: changing the style sheet changes the
presentation, without changing the content.
• productivity: focus on content first • division of labor: content-producers and artists • adaptability: re-styling is easy
Why?
![Page 23: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/23.jpg)
1. select some of the tagged regions in an HTML doc. 2. Change the style: properties like color, position, etc.
Style block in head section. (better: put in separate file)
![Page 24: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/24.jpg)
<selector> { property: value; property: value; property: value; }
Two things to learn: 1) more interesting selectors 2) some properties
![Page 25: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/25.jpg)
Positioning with float
![Page 26: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/26.jpg)
Positioning with float
![Page 27: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/27.jpg)
Selecting specific items: id
Attribute to label an item in HTML (id attribute, double quotes)
# selector in CSS chooses labelled item
![Page 28: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/28.jpg)
Selecting groups of items: class
![Page 29: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/29.jpg)
Selecting groups of items: class. selector in CSS chooses labelled itemS
attributes label items in HTML (class attribute, double quotes)
![Page 30: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/30.jpg)
slicing HTML content: <span>What if you want to make only part of a paragraph red?
![Page 31: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/31.jpg)
Exercise: red flying objects
![Page 32: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/32.jpg)
Answer: red flying objects
![Page 33: Web-page design with HTML/cssfwp/lecture06/slides06.pdf · CSS Main idea: changing the style sheet changes the presentation, without changing the content. • productivity: focus](https://reader035.vdocuments.us/reader035/viewer/2022071019/5fd2d21fb6625a3f7a4925e0/html5/thumbnails/33.jpg)
Example: navbar(Go to end of lecture 6 notes)