CSS for designers - Lesson 1 - HTML
-
Upload
idan-segev -
Category
Technology
-
view
796 -
download
4
description
Transcript of CSS for designers - Lesson 1 - HTML
![Page 1: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/1.jpg)
CSS for designers
![Page 2: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/2.jpg)
the Web Standards approach
content
representation
![Page 3: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/3.jpg)
HTML
CSS
content + markup
representation = layout + style
the Web Standards approach
![Page 4: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/4.jpg)
HTML
CSS
JS
content + markup
representation = layout + style
interactionetc
the Web Standards approach
HTML
CSS
JS
content + markup
representation = layout + style
interactionetc
the Web Standards approach
![Page 5: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/5.jpg)
HTMLLesson I
![Page 6: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/6.jpg)
HTMLLesson I
Hyper Text Markup Language
![Page 7: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/7.jpg)
HTMLLesson I
Hyper Text Markup LanguageHyper Text Markup Language
![Page 8: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/8.jpg)
HTMLLesson I
Hyper Text Markup LanguageHyper Text Markup Language
The son of Brahman
In the shade of the house, in the sunshine of the riverbank
near the boats, in the shade of the Sal-wood forest
The young falcon, together with his friend Govinda Brahman.
The sun tanned his light shoulders by the banks of the river
when bathing, performing the sacred ablutions, the sacred
offerings. In the mango grove, shade poured into his black
eyes, when playing as a boy, when his mother sang, when
the sacred offerings were made, when his father, the
scholar, taught him, when the wise men talked. For a long
time, Siddhartha had been partaking in the
Next
Title Subtitle Paragraph
![Page 9: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/9.jpg)
<trumpet> Miles Davis </trumpet>
![Page 10: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/10.jpg)
<trumpet> Miles Davis </trumpet>
![Page 11: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/11.jpg)
<trumpet> Miles Davis </trumpet>
content
tag closing tag
![Page 12: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/12.jpg)
<bigband> <trumpet> Miles Davis </trumpet></bigband>
![Page 13: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/13.jpg)
<bigband> <trumpet> Miles Davis <trumpet> <sax> Coltrane </sax></bigband>
![Page 14: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/14.jpg)
<html>
</html>
![Page 15: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/15.jpg)
<html>
<head> ... </head>
<body> ... </body>
</html>
setup
mmm.... the rest
![Page 16: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/16.jpg)
<html> <head> <title>Thelonious Monk</title> </head>
<body> ... </body></html>
http://www.w3schools.com/tags/tag_title.asp
![Page 17: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/17.jpg)
<html> <head> <title>Thelonious Monk</title> <meta name="description" content="Stuff about monk" /> </head>
<body> ... </body></html>
http://www.w3schools.com/tags/tag_meta.asp
![Page 18: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/18.jpg)
http://www.w3schools.com/tags/default.asp
aabbracronymaddressareabbasebdobigblockquotebodybrbuttoncaptioncitecodecolclogroupdd
deldfmdivdlDOCTYPEdtemfieldsetformh1, h2, h2, h4,h5, h6headhtmlhriimginputinskbd
labellegendlilinkmapmetanoscriptobjectoloptgroupoptionpparampreqsampscriptselectsmall
spanstrongstylesubsuptabletbodytdtextareatfootththeadtitletrttulvar
![Page 19: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/19.jpg)
http://www.w3schools.com/tags/default.asp
aabbracronymaddressareabbasebdobigblockquotebodybrbuttoncaptioncitecodecolclogroupdd
deldfmdivdlDOCTYPEdtemfieldsetformh1, h2, h2, h4,h5, h6headhtmlhriimginputinskbd
labellegendlilinkmapmetanoscriptobjectoloptgroupoptionpparampreqsampscriptselectsmall
spanstrongstylesubsuptabletbodytdtextareatfootththeadtitletrttulvar
![Page 20: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/20.jpg)
<html>
<head> <title>Thelonious Monk</title></head>
<body> <h1>>Thelonious Monk</h1> <h2>"All musicians are subconsciously mathematicians."</h2>
<img src="http://farm5.static.flickr.com/4144/4843138893_c6b201769b.jpg">
<p> Thelonious Monk was born October 10, 1917 in Rocky Mount, North Carolina, the son of Thelonious and Barbara Monk, two years after his sister Marion. A brother, Thomas, was born in January 1920.[8] In 1922, the family moved to 243 West 63rd Street, in Manhattan, New York City. Monk started playing the piano at the age of six. Although he had some formal training and eavesdropped on his sister's piano lessons, he was largely self-taught. Monk attended Stuyvesant High School, but did not graduate. He toured with an evangelist in his teens, playing the church organ, and in his late teens he began to find work playing jazz.<br> <a href="http://en.wikipedia.org/wiki/Thelonious_Monk" target="_blank">Wikipedia value</a> </p>
<h2>Discography</h2>
<h3>Blue Note Records (1948-1952)</h3> <ul> <li>Genius of Modern Music: Volume 1</li> <li>Genius of Modern Music: Volume 2</li> <li>Thelonious Monk Trio</li> <li>>Monk (Prestige 7053)</li> <li>Thelonious Monk and Sonny Rollins (Prestige 7075)</li> </ul>
<h3>Misc Records</h3> <ul> <li>Thelonious Monk plays the Music of Duke Ellington (1955)</li> <li>The Unique Thelonious Monk (1955)</li> <li>Brilliant Corners (1956 recording with Sonny Rollins and Clark Terry)</li> <li>Thelonious Himself (1957)</li> <li>Tonk's Music (1957)</li> </ul>
<h2>Videos</h2> <iframe width="420" height="315" src="http://www.youtube.com/embed/OMmeNsmQaFw" frameborder="0" allowfullscreen></iframe></body>
</html>
![Page 21: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/21.jpg)
![Page 22: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/22.jpg)
H1H2H3H4H5
H6Header of varying importancehttp://www.w3schools.com/TAGS/tag_hn.asp
![Page 23: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/23.jpg)
<h1>>Thelonious Monk</h1><h2>"All musicians are subconsciously mathematicians."</h2>
H1H2
http://www.w3schools.com/TAGS/tag_hn.asp
![Page 24: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/24.jpg)
imgImage (daaa)
<img src="http://farm5.static.
flickr.com/4144/4843138893_
c6b201769b.jpg"/>
http://www.w3schools.com/TAGS/tag_img.asp
![Page 25: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/25.jpg)
imgImage (daaa)
<img src="http://farm5.static.
flickr.com/4144/4843138893_
c6b201769b.jpg"
alt="Monk Playing”
height="100”
width="100” />
http://www.w3schools.com/TAGS/tag_img.asp
![Page 26: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/26.jpg)
PParagraph
http://www.w3schools.com/TAGS/tag_p.asp
<p>
Thelonious Monk was born October 10, 1917 in Rocky Mount,
North Carolina, the son of Thelonious and Barbara Monk, two
years after his sister Marion. A brother, Thomas, was born in
January 1920.[8] In 1922, the family moved to 243 West 63rd
Street, in Manhattan, New York City. Monk started playing the
piano at the age of six. Although he had some formal training and
eavesdropped on his sister's piano lessons, he was largely self-
taught. Monk attended Stuyvesant High School, but did not gradu-
ate. He toured with an evangelist in his teens, playing the church
organ, and in his late teens he began to find work playing
jazz.<br>
<a href="http://en.wikipedia.org/wiki/Thelonious_Monk"
target="_blank">Wikipedia value</a>
</p>
![Page 27: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/27.jpg)
aanchor
<a href="http://en.wikipedia.org/
wiki/Thelonious_Monk"
target="_blank">
Wikipedia value</a>
http://www.w3schools.com/TAGS/tag_a.asp
![Page 28: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/28.jpg)
ol / l iordered list / list item
<ol>
<li>Volume 1</li>
<li>Volume 2</li>
<li>Thelonious Monk Trio</li>
<li>Monk (Prestige 7053)</li>
<li>Thelonious Monk and
Sonny Rollins</li>
</ol>
http://www.w3schools.com/TAGS/tag_ol.asp
![Page 29: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/29.jpg)
ul / l iUNordered list / list item
<ul>
<li>The Unique Monk</li>
<li>Brilliant Corners</li>
<li>Thelonious Himself</li>
<li>Monk's Music</li>
</ul>
http://www.w3schools.com/TAGS/tag_ul.asp
![Page 30: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/30.jpg)
?#!<iframe width="420" height="315"
src="http://www.youtube.com/
embed/OMmeNsmQaFw"
frameborder="0" allowfullscreen>
</iframe>
http://www.w3schools.com/TAGS/tag_ul.asp
![Page 31: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/31.jpg)
http://www.w3schools.com/tags/tag_div.asp
<div>and<span>
![Page 32: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/32.jpg)
http://www.w3schools.com/tags/tag_table.asp
Table / th / t r / tdTable / table header / table row / table data
![Page 33: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/33.jpg)
![Page 34: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/34.jpg)
![Page 35: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/35.jpg)
![Page 36: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/36.jpg)
![Page 37: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/37.jpg)
![Page 38: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/38.jpg)
<html><head> <title>Thelonious Monk</title></head>
<body> <div> <h1>>Thelonious Monk</h1> <h2>"All musicians are subconsciously mathematicians."</h2>
<img src="http://farm5.static.flickr.com/4144/4843138893_c6b201769b.jpg"> </div>
<div> <p> Thelonious Monk was born October 10, 1917 in Rocky Mount, North Carolina, the son of Thelonious and Barbara Monk, two years after his sister Marion. A brother, Thomas, was born in January 1920.[8] In 1922, the family moved to 243 West 63rd Street, in Manhattan, New York City. Monk started playing the piano at the age of six. Although he had some formal training and eavesdropped on his sister's piano lessons, he was largely self-taught. Monk attended Stuyvesant High School, but did not graduate. He toured with an evangelist in his teens, playing the church organ, and in his late teens he began to find work playing jazz.<br> <a href="http://en.wikipedia.org/wiki/Thelonious_Monk" target="_blank">Wikipedia value</a> </p> <h2>Discography</h2> <h3>Blue Note Records (1948-1952)</h3> <ol> <li>Genius of Modern Music: Volume 1</li> <li>Genius of Modern Music: Volume 2</li> <li>Thelonious Monk Trio</li> <li>>Monk (Prestige 7053)</li> <li>Thelonious Monk and Sonny Rollins (Prestige 7075)</li> </ol> </div>
<div> <h3>Misc Records</h3> <ul> <li>Thelonious Monk plays the Music of Duke Ellington (1955)</li> <li>The Unique Thelonious Monk (1955)</li> <li>Brilliant Corners (1956 recording with Sonny Rollins and Clark Terry)</li> <li>Thelonious Himself (1957)</li> <li>Tonk's Music (1957)</li> </ul>
<h2>Videos</h2> <iframe width="420" height="315" src="http://www.youtube.com/embed/OMmeNsmQaFw" frameborder="0" allowfullscreen></iframe> </div>
</body></html>
![Page 39: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/39.jpg)
<html><head> <title>Thelonious Monk</title></head>
<body> <div style="color:blue;text-align:right"> <h1>>Thelonious Monk</h1> <h2>"All musicians are subconsciously mathematicians."</h2>
<img src="http://farm5.static.flickr.com/4144/4843138893_c6b201769b.jpg"> </div>
<div style="color:red;text-align:center"> <p> Thelonious Monk was born October 10, 1917 in Rocky Mount, North Carolina, the son of Thelonious and Barbara Monk, two years after his sister Marion. A brother, Thomas, was born in January 1920.[8] In 1922, the family moved to 243 West 63rd Street, in Manhattan, New York City. Monk started playing the piano at the age of six. Although he had some formal training and eavesdropped on his sister's piano lessons, he was largely self-taught. Monk attended Stuyvesant High School, but did not graduate. He toured with an evangelist in his teens, playing the church organ, and in his late teens he began to find work playing jazz.<br> <a href="http://en.wikipedia.org/wiki/Thelonious_Monk" target="_blank">Wikipedia value</a> </p> <h2>Discography</h2> <h3>Blue Note Records (1948-1952)</h3> <ol> <li>Genius of Modern Music: Volume 1</li> <li>Genius of Modern Music: Volume 2</li> <li>Thelonious Monk Trio</li> <li>>Monk (Prestige 7053)</li> <li>Thelonious Monk and Sonny Rollins (Prestige 7075)</li> </ol> </div>
<div style="color:green;text-align:left"> <h3>Misc Records</h3> <ul> <li>Thelonious Monk plays the Music of Duke Ellington (1955)</li> <li>The Unique Thelonious Monk (1955)</li> <li>Brilliant Corners (1956 recording with Sonny Rollins and Clark Terry)</li> <li>Thelonious Himself (1957)</li> <li>Tonk's Music (1957)</li> </ul>
<h2>Videos</h2> <iframe width="420" height="315" src="http://www.youtube.com/embed/OMmeNsmQaFw" frameborder="0" allowfullscreen></iframe> </div>
</body></html>
![Page 40: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/40.jpg)
![Page 41: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/41.jpg)
THAT’SALLFOLKSwww.slideshare.net/idanska
![Page 42: CSS for designers - Lesson 1 - HTML](https://reader034.fdocuments.us/reader034/viewer/2022052619/555d4ea0d8b42a9d3b8b47e8/html5/thumbnails/42.jpg)
homework