Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document...
Transcript of Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document...
![Page 1: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/1.jpg)
Web-page design with HTML/css
![Page 2: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/2.jpg)
![Page 3: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/5.jpg)
Why coders hate Word: content vs. style
![Page 6: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/6.jpg)
HTML describes contentYou write: Browser displays:
Tag pair
![Page 7: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/7.jpg)
HTML describes contentYou write: Browser displays:
Tag pair
![Page 8: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/8.jpg)
Header tags: h1..h6
![Page 9: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/11.jpg)
Nested tags
Malformed HTML: <p> <strong> </p> </strong>
![Page 12: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/15.jpg)
Exercise: tables
![Page 16: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/17.jpg)
Links
href parameter gives target of link.
![Page 18: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/18.jpg)
Exercise: space
![Page 19: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/19.jpg)
iframesiframes allow you to embed a web page inside another page
![Page 20: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/21.jpg)
Style with CSS
![Page 22: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/25.jpg)
Positioning with float
![Page 26: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/26.jpg)
Positioning with float
![Page 27: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/28.jpg)
Selecting groups of items: class
![Page 29: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/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/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/31.jpg)
Exercise: red flying objects
![Page 32: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/32.jpg)
Answer: red flying objects
![Page 33: Web-page design with HTML/cssfwp/lecture05/slides05.pdf · Fetching pages 1. I have a Word document (.doc) 2. You send me an e-mail requesting the document. 3. I send you an e-mail](https://reader034.fdocuments.us/reader034/viewer/2022042313/5edc9361ad6a402d66674c23/html5/thumbnails/33.jpg)
Example: navbar(Go to end of lecture 6 notes)