HTML and CSS Fundamentals
undefined
CSE 154
LECTURE 2: MORE HTML AND CSS
B
l
o
c
k
a
n
d
i
n
l
i
n
e
e
l
e
m
e
n
t
s
block
elements contain an entire large region of content
◦
examples: paragraphs, lists, table cells
◦
the browser places a margin of whitespace between block elements for
separation
inline
elements affect a small amount of content
◦
examples: bold text, code fragments, images
◦
the browser allows many inline elements to appear on the same line
◦
must be nested inside a block element
L
i
n
e
b
r
e
a
k
:
<
b
r
>
forces a line break in the middle of a block element (inline)
<p>
The woods are lovely, dark and deep, <br /> But I have promises to
keep, <br /> And miles to go before I sleep, <br /> And miles to go
before I sleep.
</p>
The woods are lovely, dark and deep,
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.
•
Warning
: Don't over-use br (guideline: >= 2 in a row is bad)
L
i
n
k
s
:
<
a
>
links, or "anchors", to other pages (inline)
<p>
Search
<a href="http://www.google.com/">Google</a> or our
<a href="lectures.html">Lecture Notes</a>.
</p>
Search Google or our Lecture Notes.
•
uses the href attribute to specify the destination URL
•
can be absolute (to another web site) or relative (to another page on this site)
•
anchors are inline elements; must be placed in a block element such as p or h1
P
h
r
a
s
e
e
l
e
m
e
n
t
s
:
<
e
m
>
,
<
s
t
r
o
n
g
>
em: emphasized text (usually rendered in italic)
strong: strongly emphasized text (usually rendered in bold)
<p>
HTML is <em>really</em>,
<strong>REALLY</strong> fun!
</p>
HTML is
really
,
REALLY
fun!
•
as usual, the tags must be properly nested for a valid page
I
m
a
g
e
s
:
<
i
m
g
>
inserts a graphical image into the page (inline)
<img src="images/koalafications.jpg" alt="Koalified koala" />
•
the src attribute specifies the image URL
•
HTML5 also requires an alt attribute describing the image
C
o
m
m
e
n
t
s
:
<
!
-
-
.
.
.
-
-
>
comments to document your HTML file or "comment out" text
<!-- My web page, by Suzy Student
CSE 190 D, Spring 2048 -->
<p>CSE courses are <!-- NOT --> a lot of fun!</p>
CSE courses are a lot of fun!
•
many web pages are not thoroughly commented (or at all)
•
still useful at top of page and for disabling code
•
comments cannot be nested and cannot contain a --
Q
u
o
t
a
t
i
o
n
s
<
b
l
o
c
k
q
u
o
t
e
>
a lengthy quotation (block)
<p>As Lincoln said in his famous Gettysburg Address:</p>
<blockquote>
<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, and dedicated to the proposition that all men are created equal.
output
I
n
l
i
n
e
q
u
o
t
a
t
i
o
n
s
<
q
>
a short quotation (inline)
<p>Quoth the Raven, <q>Nevermore.</q></p>
HTML
Quoth the Raven, “Nevermore.”
output
•
Why not just write the following?
<p>Quoth the Raven, "Nevermore."</p>
C
o
m
p
u
t
e
r
c
o
d
e
<
c
o
d
e
>
<p>
The <code>ul</code> and <code>ol</code>
tags make lists.
</p>
HTML
The
ul
and
ol
tags make lists.
output
a short section of computer code (usually shown in a fixed-width font)
P
r
e
f
o
r
m
a
t
t
e
d
t
e
x
t
<
p
r
e
>
a large section of pre-formatted text (block)
<pre>
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
</pre>
HTML
Bill Gates speaks
You will be assimilated
Microsoft fans delirious
output
•
Displayed with exactly the whitespace / line breaks given in the text
•
Shown in a fixed-width font by default
D
e
l
e
t
i
o
n
s
a
n
d
i
n
s
e
r
t
i
o
n
s
:
<
d
e
l
>
,
<
i
n
s
>
content that should be considered deleted or added to the document (inline)
<p>
<del>
Final Exam
</del>
<ins>
Midterm
</ins>
is on
<del>
Aug 29
</del>
<ins>
Apr 17
</ins>
.
</p>
HTML
F
i
n
a
l
E
x
a
m
M
i
d
t
e
r
m
i
s
o
n
A
u
g
2
9
A
p
r
1
7
.
o
u
t
p
u
t
A
b
b
r
e
v
i
a
t
i
o
n
s
:
<
a
b
b
r
>
an abbreviation, acronym, or slang term (inline)
<p>
Safe divers always remember to check their
<abbr title="Self-Contained Underwater Breathing
Apparatus">
SCUBA
</abbr>
gear.
</p>
HTML
S
a
f
e
d
i
v
e
r
s
a
l
w
a
y
s
r
e
m
e
m
b
e
r
t
o
c
h
e
c
k
t
h
e
i
r
S
C
U
B
A
g
e
a
r
.
o
u
t
p
u
t
•
The title will appear when the abbreviated word is hovered over
•
In some browsers the abbreviated word will have a dashed underline
The Internet
•
Wikipedia:
http://en.wikipedia.org/wiki/Internet
•
a connection of computer networks using the Internet Protocol (IP)
•
layers of communication protocols: IP → TCP/UDP → HTTP/FTP/POP/SMTP/SSH...
Web servers
and
browsers
•
web server
: software that listens for web page requests
•
Apache
•
Microsoft Internet Information Server (IIS) (
part of Windows
)
•
web browser
: fetches/displays documents from web servers
•
Mozilla Firefox
•
Microsoft
Internet Explorer
(IE)
•
Apple
Safari
•
Google Chrome
•
Opera
Layers of protocol
P
r
o
t
o
c
o
l
:
a set of rules governing the format of data sent
I
P
a
d
d
r
e
s
s
:
How do web addresses work?
DNS:
•
a set of servers that map written names to IP addresses
•
Example:
www.cs.washington.edu
→
128.208.3.88
•
many systems maintain a local cache called a
hosts file
URL:
•
a basic URL:
http://www.aw-bc.com/info/regesstepp/index.html
~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~
protocol host path
Who "runs" the internet?
•
Internet Engineering Task Force (
IETF
): internet protocol standards
•
Internet Corporation for Assigned Names and Numbers (
ICANN
):
decides top-level
domain names
•
World Wide Web Consortium (
W3C
): web standards
Brief History
•
began as a US Department of Defense network called
ARPANET
(1960s-70s)
•
initial services: electronic mail, file transfer
•
opened to commercial interests in late 80s
•
WWW created in 1989-91 by
Tim Berners-Lee
•
popular web browsers released: Netscape 1994, IE 1995
•
Amazon.com opens in 1995; Google January 1996
•
Hamster Dance
web page created in 1999
C
o
n
t
e
n
t
v
s
.
p
r
e
s
e
n
t
a
t
i
o
n
•
H
T
M
L
i
s
f
o
r
c
o
n
t
e
n
t
;
w
h
a
t
i
s
o
n
t
h
e
p
a
g
e
(
h
e
a
d
i
n
g
;
l
i
s
t
;
c
o
d
e
;
e
t
c
.
)
•
C
S
S
i
s
f
o
r
p
r
e
s
e
n
t
a
t
i
o
n
;
h
o
w
t
o
d
i
s
p
l
a
y
t
h
e
p
a
g
e
(
b
o
l
d
;
c
e
n
t
e
r
e
d
;
2
0
p
x
m
a
r
g
i
n
;
e
t
c
.
)
•
keeping content separate from presentation is a very important web
design principle
•
If the HTML contains no styles, its entire appearance can be changed
by swapping
.css
files
•
see also:
CSS Zen Garden
C
a
s
c
a
d
i
n
g
S
t
y
l
e
S
h
e
e
t
s
(
C
S
S
)
:
<
l
i
n
k
>
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head>
•
CSS describes the appearance and layout of information on a web page (as
opposed to HTML, which describes the content of the page)
•
can be embedded in HTML or placed into separate .css file (preferred)
B
a
s
i
c
C
S
S
r
u
l
e
s
y
n
t
a
x
selector
{property
:
value
;
property
:
value
;
...
property
:
value
;
}
•
a CSS file consists of one or more rules
•
a rule's selector specifies HTML element(s) and applies
style properties
•
a selector of * selects all elements
p {font-family: sans-serif;
color: red;
}
C
S
S
p
r
o
p
e
r
t
i
e
s
f
o
r
c
o
l
o
r
s
p {color: red;
background-color: yellow;
}
This paragraph uses the style above.
S
p
e
c
i
f
y
i
n
g
c
o
l
o
r
s
p { color: red
; }
h2 { color: rgb(128, 0, 196)
; }
h4 { color: #FF8800
; }
This paragraph uses the first style above.
This h2 uses the second style above.
This h4 uses the third style above.
•
c
olor names:
aqua
,
black
,
blue
,
fuchsia
,
gray
,
green
,
lime
,
maroon
,
navy
,
olive
,
purple
,
red
,
silver
,
teal
,
white
(
white
),
yellow
•
RGB codes: red, green, and blue values from 0 (none) to 255 (full)
•
hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
C
S
S
p
r
o
p
e
r
t
i
e
s
f
o
r
f
o
n
t
s
f
o
n
t
-
s
i
z
e
p {font-size: 14pt;
}
This paragraph uses the style above.
•
units: pixels (px) vs. point (pt) vs. m-size (em)
16px,
16pt
,
1.16em
•
vague font sizes:
xx-small
,
x-small
,
small
, medium,
large
,
x-large
,
xx-large
,
smaller,
larger
•
percentage font sizes, e.g.: 90%,
120%
f
o
n
t
-
f
a
m
i
l
y
p {font-family: Georgia;
}
h2 {font-family: "Courier New";
}
This paragraph uses the first style above.
This h2 uses the second style above.
•
enclose multi-word font names in quotes
M
o
r
e
a
b
o
u
t
f
o
n
t
-
f
a
m
i
l
y
p {font-family: Garamond, "Times New Roman", serif;
}
This paragraph uses the above style.
•
can specify multiple fonts from highest to lowest priority
•
generic font names:
serif
,
sans-serif
,
cursive
,
fantasy
,
monospace
f
o
n
t
-
w
e
i
g
h
t
,
f
o
n
t
-
s
t
y
l
e
p {font-weight: bold;
font-style: italic;
}
This paragraph uses the style above.
•
either of the above can be set to normal to turn them off (e.g. headings)
C
S
S
p
r
o
p
e
r
t
i
e
s
f
o
r
t
e
x
t
Complete list of text properties
(http://www.w3schools.com/css/css_reference.asp#text)
t
e
x
t
-
a
l
i
g
n
blockquote { text-align: justify; }h2 { text-align: center; } CSS
The Emperor's Quote
[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I
am unarmed. Take your weapon. Strike me down with all of your hatred and your journey
towards the dark side will be complete.
output
•
can be left, right, center, or justify (which widens all full lines of the element so that
they occupy its entire width)
T
e
x
t
-
d
e
c
o
r
a
t
i
o
n
p {text-decoration: underline;
}
CSS
This paragraph uses the style above.
output
•
can also be
overline,
line-through
, blink, or none
•
effects can be combined:
text-decoration: overline underline;
t
e
x
t
-
s
h
a
d
o
w
p {font-weight: bold;
text-shadow: 2px 2px gray;
}
CSS
•
shadow is specified as an X-offset, a Y-offset, and an optional color
C
S
S
p
r
o
p
e
r
t
i
e
s
f
o
r
b
a
c
k
g
r
o
u
n
d
s
b
a
c
k
g
r
o
u
n
d
-
i
m
a
g
e
body {background-image: url("images/draft.jpg");}
CSS
•
background image/color fills the element's content area
b
a
c
k
g
r
o
u
n
d
-
r
e
p
e
a
t
body {background-image: url("images/draft.jpg");background-repeat: repeat-x;
}
CSS
•
can be repeat (default), repeat-x, repeat-y, or no-repeat
b
a
c
k
g
r
o
u
n
d
-
p
o
s
i
t
i
o
n
body {background-image: url("images/draft.jpg");background-repeat: no-repeat;
background-position: 370px 20px;
}
CSS
•
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 amount
Learn about block and inline elements, line breaks, links, phrase elements, and images in HTML and CSS through practical examples. Explore how to structure content, create visual elements, and enhance the user experience on web pages.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
CSE 154 LECTURE 2: MORE HTML AND CSS
Block and inline elements Block and inline elements block elements contain an entire large region of content examples: paragraphs, lists, table cells the browser places a margin of whitespace between block elements for separation inline elements affect a small amount of content examples: bold text, code fragments, images the browser allows many inline elements to appear on the same line must be nested inside a block element
Line break: Line break: < <br br> > forces a line break in the middle of a block element (inline) <p> The woods are lovely, dark and deep, <br /> But I have promises to keep, <br /> And miles to go before I sleep, <br /> And miles to go before I sleep. </p> The woods are lovely, dark and deep, But I have promises to keep, And miles to go before I sleep, And miles to go before I sleep. Warning: Don't over-use br (guideline: >= 2 in a row is bad)
Links: Links: <a> <a> links, or "anchors", to other pages (inline) <p> Search <a href="http://www.google.com/">Google</a> or our <a href="lectures.html">Lecture Notes</a>. </p> Search Google or our Lecture Notes. uses the href attribute to specify the destination URL can be absolute (to another web site) or relative (to another page on this site) anchors are inline elements; must be placed in a block element such as p or h1
Phrase elements Phrase elements : : < <em em> >, , <strong> <strong> em: emphasized text (usually rendered in italic) strong: strongly emphasized text (usually rendered in bold) <p> HTML is <em>really</em>, <strong>REALLY</strong> fun! </p> HTML is really, REALLY fun! as usual, the tags must be properly nested for a valid page
Images: Images: < <img img> > inserts a graphical image into the page (inline) <img src="images/koalafications.jpg" alt="Koalified koala" /> the src attribute specifies the image URL HTML5 also requires an alt attribute describing the image
Comments: Comments: <! <!-- --... ... -- --> > comments to document your HTML file or "comment out" text <!-- My web page, by Suzy Student CSE 190 D, Spring 2048 --> <p>CSE courses are <!-- NOT --> a lot of fun!</p> CSE courses are a lot of fun! many web pages are not thoroughly commented (or at all) still useful at top of page and for disabling code comments cannot be nested and cannot contain a --
Quotations < Quotations <blockquote blockquote> > a lengthy quotation (block) <p>As Lincoln said in his famous Gettysburg Address:</p> <blockquote> <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, and dedicated to the proposition that all men are created equal. output
Inline quotations <q> Inline quotations <q> a short quotation (inline) <p>Quoth the Raven, <q>Nevermore.</q></p> HTML Quoth the Raven, Nevermore. output Why not just write the following? <p>Quoth the Raven, "Nevermore."</p>
Computer code <code> Computer code <code> a short section of computer code (usually shown in a fixed-width font) <p> </p> HTML The ul and ol tags make lists. The <code>ul</code> and <code>ol</code> tags make lists. output
Preformatted text <pre> Preformatted text <pre> a large section of pre-formatted text (block) <pre> </pre> HTML Bill Gates speaks You will be assimilated Microsoft fans delirious Bill Gates speaks You will be assimilated Microsoft fans deliriousoutput Displayed with exactly the whitespace / line breaks given in the text Shown in a fixed-width font by default
Deletions and insertions: <del>, <ins> Deletions and insertions: <del>, <ins> content that should be considered deleted or added to the document (inline) <p> <del>Final Exam</del><ins>Midterm</ins> is on <del>Aug 29</del><ins>Apr 17</ins>. </p> HTML Final Exam Midterm is on Aug 29 Apr 17. output
Abbreviations: < Abbreviations: <abbr abbr> > an abbreviation, acronym, or slang term (inline) <p> Safe divers always remember to check their <abbr title="Self-Contained Underwater Breathing Apparatus">SCUBA</abbr> gear. </p> HTML Safe divers always remember to check their SCUBA gear. output The title will appear when the abbreviated word is hovered over In some browsers the abbreviated word will have a dashed underline
The Internet Wikipedia: http://en.wikipedia.org/wiki/Internet a connection of computer networks using the Internet Protocol (IP) layers of communication protocols: IP TCP/UDP HTTP/FTP/POP/SMTP/SSH...
Web servers and browsers web server: software that listens for web page requests Apache Microsoft Internet Information Server (IIS) (part of Windows) web browser: fetches/displays documents from web servers Mozilla Firefox Microsoft Internet Explorer (IE) Apple Safari Google Chrome Opera
Layers of protocol Protocol: a set of rules governing the format of data sent IP address:
How do web addresses work? DNS: a set of servers that map written names to IP addresses Example: www.cs.washington.edu 128.208.3.88 many systems maintain a local cache called a hosts file URL: a basic URL:http://www.aw-bc.com/info/regesstepp/index.html ~~~~ ~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~ protocol host path
Who "runs" the internet? Internet Engineering Task Force (IETF): internet protocol standards Internet Corporation for Assigned Names and Numbers (ICANN): decides top-level domain names World Wide Web Consortium (W3C): web standards
Brief History began as a US Department of Defense network called ARPANET (1960s-70s) initial services: electronic mail, file transfer opened to commercial interests in late 80s WWW created in 1989-91 by Tim Berners-Lee popular web browsers released: Netscape 1994, IE 1995 Amazon.com opens in 1995; Google January 1996 Hamster Dance web page created in 1999
Content vs. presentation Content vs. presentation HTML is for content; what is on the page (heading; list; code; etc.) CSS is for presentation; how to display the page (bold; centered; 20px margin; etc.) keeping content separate from presentation is a very important web design principle If the HTML contains no styles, its entire appearance can be changed by swapping .css files see also: CSS Zen Garden
Cascading Style Sheets (CSS): Cascading Style Sheets (CSS): <link> <link> <head> </head> ... <link href="filename" type="text/css" rel="stylesheet" /> ... CSS describes the appearance and layout of information on a web page (as opposed to HTML, which describes the content of the page) can be embedded in HTML or placed into separate .css file (preferred)
Basic CSS rule syntax Basic CSS rule syntax selector { property: value; property: value; ... property: value; } a CSS file consists of one or more rules p { font-family: sans-serif; color: red; } a rule's selector specifies HTML element(s) and applies style properties a selector of * selects all elements
CSS properties for colors CSS properties for colors p { } color: red; background-color: yellow; This paragraph uses the style above. Property Description color color of an element s text background-color color that will appear behind the element
Specifying colors Specifying colors p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; } This paragraph uses the first style above. This h2 uses the second style above. This h4 uses the third style above. color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow RGB codes: red, green, and blue values from 0 (none) to 255 (full) hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full)
CSS properties for CSS properties for fonts fonts property description font-family which font will be used font-size how large the letters will be drawn font-style used to enable/disable italic style font-weight used to enable/disable bold style Complete list of font properties
font font- -size p { } size font-size: 14pt; This paragraph uses the style above. units: pixels (px) vs. point (pt) vs. m-size (em) 16px, 16pt, 1.16em vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger percentage font sizes, e.g.: 90%, 120%
font font- -family family p { font-family: Georgia; } h2 { font-family: "Courier New"; } This paragraph uses the first style above. This h2 uses the second style above. enclose multi-word font names in quotes
More about font More about font- -family family p { font-family: Garamond, "Times New Roman", serif; } This paragraph uses the above style. can specify multiple fonts from highest to lowest priority generic font names: serif, sans-serif, cursive, fantasy, monospace
font font- -weight, font weight, font- -style style p { font-weight: bold; font-style: italic; } This paragraph uses the style above. either of the above can be set to normal to turn them off (e.g. headings)
CSS properties for text CSS properties for text property text-align text-decoration line-height, word-spacing, letter-spacing text-indent description alignment of text within its element decorations such as underlining gaps between the various portions of the text indents the first letter of each paragraph Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text)
text text- -align align blockquote { text-align: justify; } h2 { text-align: center; } CSS The Emperor's Quote [TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete. output can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)
Text Text- -decoration decoration p { } text-decoration: underline; CSS This paragraph uses the style above. output can also be overline, line-through, blink, or none effects can be combined: text-decoration: overline underline;
text text- -shadow shadow p { } CSS font-weight: bold; text-shadow: 2px 2px gray; This paragraph uses the style above. output shadow is specified as an X-offset, a Y-offset, and an optional color
CSS properties for backgrounds CSS properties for backgrounds property description background-color color to fill background background-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 page background shorthand to set all background properties
background background- -image image body { } CSS background-image: url("images/draft.jpg"); background image/color fills the element's content area
background background- -repeat repeat body { background-image: url("images/draft.jpg"); background-repeat: repeat-x; } CSS can be repeat (default), repeat-x, repeat-y, or no-repeat
background background- -position position body { }CSS background-image: url("images/draft.jpg"); background-repeat: no-repeat; background-position: 370px 20px; 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 amount
