CSS for designers - Lesson 1 - HTML

the Web Standards approach

content

representation


content
HTML + markup

representation
CSS = layout + style


content
HTML + markup

representation
CSS = layout + style

interaction
JS etc

Lesson I

HTML
Hyper Text Markup Language

Lesson I

HTML

Lesson I

HTML
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

<trumpet> Miles Davis </trumpet>

content

<trumpet> Miles Davis </trumpet>

tag closing tag

<bigband>
<trumpet>
Miles Davis
</trumpet>
</bigband>

<bigband>
<trumpet>
Miles Davis
<trumpet>
<sax>
Coltrane
</sax>
</bigband>

<html>

<head>
... setup

</head>

<body>
... mmm.... the rest

</body>

</html>

<html>
<head>
<title>Thelonious Monk</title>
</head>

<body>
...
</body>
</html>

http://www.w3schools.com/tags/tag_title.asp

<html>
<head>
<meta name="description"
content="Stuff about monk" />
</head>

<body>
...
</body>
</html>
http://www.w3schools.com/tags/tag_meta.asp

a del label span
abbr dfm legend strong
acronym div li style
address dl link sub
area DOCTYPE map sup
b dt meta table
base em noscript tbody
bdo ﬁeldset object td
big form ol textarea
blockquote h1, h2, h2, h4, optgroup tfoot
body h5, h6 option th
br head p thead
button html param title
caption hr pre tr
cite i q tt
code img samp ul
col input script var
clogroup ins select
dd kbd small
http://www.w3schools.com/tags/default.asp

<html>

<head>
</head>

<body>
<h1>>Thelonious Monk</h1>
<h2>"All musicians are subconsciously mathematicians."</h2>

<img src="http://farm5.static.ﬂickr.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 ﬁnd 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>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>

H1
H2
H3
H4
H5
H6
Header of varying importance
http://www.w3schools.com/TAGS/tag_hn.asp

H1
H2
<h2>"All musicians are
subconsciously mathematicians."
</h2>

http://www.w3schools.com/TAGS/tag_hn.asp

img
Image (daaa)
<img src="http://farm5.static.
ﬂickr.com/4144/4843138893_
c6b201769b.jpg"/>

http://www.w3schools.com/TAGS/tag_img.asp

img
Image (daaa)
<img src="http://farm5.static.
ﬂickr.com/4144/4843138893_
c6b201769b.jpg"
alt="Monk Playing”
height="100”
width="100” />

http://www.w3schools.com/TAGS/tag_img.asp

P
Paragraph
<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 ﬁnd work playing

jazz.<br>

<a href="http://en.wikipedia.org/wiki/Thelonious_Monk"

target="_blank">Wikipedia value</a>

</p>

http://www.w3schools.com/TAGS/tag_p.asp

a
anchor
<a href="http://en.wikipedia.org/
wiki/Thelonious_Monk"
target="_blank">
Wikipedia value</a>

http://www.w3schools.com/TAGS/tag_a.asp

ol / li
ordered list / list item
<ol>
<li>Volume 1</li>
<li>Volume 2</li>
<li>Monk (Prestige 7053)</li>
<li>Thelonious Monk and
Sonny Rollins</li>
</ol>

http://www.w3schools.com/TAGS/tag_ol.asp

ul / li
UNordered 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

?#!
<iframe width="420" height="315"
src="http://www.youtube.com/
embed/OMmeNsmQaFw"
frameborder="0" allowfullscreen>
</iframe>

http://www.w3schools.com/TAGS/tag_ul.asp

< di v >
and<span>
http://www.w3schools.com/tags/tag_div.asp

Table / th / tr / td
Table / table header / table row / table data

http://www.w3schools.com/tags/tag_table.asp

<html>
<head>
</head>

<body>
<div>

</div>

<div>
<p>
</p>
<ol>
</ol>
</div>

<div>
<ul>
</ul>

<h2>Videos</h2>
</div>

</body>
</html>

<html>
<head>
</head>

<body>
<div style="color:blue;text-align:right">

</div>

<div style="color:red;text-align:center">
<p>
</p>
<ol>
</ol>
</div>

<div style="color:green;text-align:left">
<ul>
</ul>

<h2>Videos</h2>
</div>

</body>
</html>

THAT’S
ALL
FOLKS
www.slideshare.net/idanska

CSS for designers - Lesson 1 - HTML

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

CSS for designers - Lesson 1 - HTML