1. No category

HTML - CS@Dartmouth

HTML & CSS
HTML: HyperText Markup Language
CSS:
Cascading Style Sheets
HTML & CSS
HTML: HyperText Markup Language
CSS:
Cascading Style Sheets
meaning (semantics)
HTML & CSS
HTML: HyperText Markup Language
meaning (semantics)
CSS:
style
Cascading Style Sheets
HTML & CSS
We the People 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.
meaning (semantics)
HTML & CSS
We the People 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.
style
HTML & CSS
We the People 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.
style
HTML
server (HTML code)
client (webpage)
HTML
tags
HTML
tags
HTML
<tag> … </tag>
(usually)
HTML
header tag
(with default style that can be modified with CSS)
HTML
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
HTML
paragraph tag
(with default style that can be modified with CSS)
HTML
HTML
<img src="https://…">
tags can contain parameters
this <img> tag has no closing tag
HTML
<img src="https://…"
style="width:256px; height:256px">
tags contain CSS style information
HTML
lists
HTML
lists
HTML
lists
HTML
lists
HTML
lists
HTML
tables
HTML
CSS
tables
HTML
<tr>: create a row
HTML
<th>: table header
HTML
<th>: table header
HTML
<td>: table data
HTML
links
HTML
<!-- this is a comment -->
comments
EXERCISE
Write some HTML code that generates the following
http://www.cs.dartmouth.edu/~fwp/exercise/html.html
EXERCISE
Write some HTML code that generates the following
http://www.cs.dartmouth.edu/~fwp/exercise/html.html
link to
homepage
2 x 2 table
128px
http://www.cs.dartmouth.edu/~fwp/images/hany.jpg
http://www.cs.dartmouth.edu/~fwp/images/devin.jpg
<h3>FWP Professors</h3>
<table>
<tr>
<td> <a href="http…">HF</a> </td>
<td> <a href="http…">DB</a> </td>
</tr>
<tr>
<td> <img src="http…" style="width:128px"> </td>
<td> <img src="http…" style="width:128px"> </td>
</tr>
</table>
Complete HTML
<!DOCTYPE html>
<html>
<head>
<title>Transcription of the Constitution</title>
</head>
<body>
<h1>The Constitution of the United States</h1>
<p><strong>We the People of the United States
</strong>, in Order to form a more perfect
Union, establish Justice, insure …
</p>
</body>
</html>
Complete HTML
<!DOCTYPE html>
<html>
<head>
<title>Transcription of the Constitution</title>
</head>
<body>
<h1>The Constitution of the United States</h1>
<p><strong>We the People of the United States
</strong>, in Order to form a more perfect
Union, establish Justice, insure …
</p>
</body>
</html>
Complete HTML
<!DOCTYPE html>
<html>
<head>
<title>Transcription of the Constitution</title>
</head>
<body>
<h1>The Constitution of the United States</h1>
<p><strong>We the People of the United States
</strong>, in Order to form a more perfect
Union, establish Justice, insure …
</p>
</body>
</html>
Complete HTML
<!DOCTYPE html>
<html>
<head>
<title>Transcription of the Constitution</title>
</head>
<body>
<h1>The Constitution of the United States</h1>
<p><strong>We the People of the United States
</strong>, in Order to form a more perfect
Union, establish Justice, insure …
</p>
</body>
</html>
Complete HTML
<!DOCTYPE html>
<html>
<head>
<title>Transcription of the Constitution</title>
</head>
<body>
<h1>The Constitution of the United States</h1>
<p><strong>We the People of the United States
</strong>, in Order to form a more perfect
Union, establish Justice, insure …
</p>
</body>
</html>
Complete HTML
<!DOCTYPE html>
<html>
<head>
<title>Transcription of the Constitution</title>
</head>
<body>
<h1>The Constitution of the United States</h1>
<p><strong>We the People of the United States
</strong>, in Order to form a more perfect
Union, establish Justice, insure …
</p>
</body>
</html>
Complete HTML
<!DOCTYPE html>
<html>
<head>
<title>Transcription of the Constitution</title>
</head>
<body>
<h1>The Constitution of the United States</h1>
<p><strong>We the People of the United States
</strong>, in Order to form a more perfect
Union, establish Justice, insure …
</p>
</body>
</html>
style matters!
CSS
default image layout
CSS
CSS
CSS
CSS
CSS
tag
CSS
property
CSS
value
CSS
CSS: id attribute
CSS: id attribute
CSS: id attribute
CSS: id attribute
unique id names
meaningful id names
CSS: class attribute
CSS: class attribute
CSS: class attribute
CSS: class attribute
CSS: class attribute
CSS: class attribute
#FF0000
#000000
EXERCISE
Write some HTML/CSS code that generates the following
EXERCISE
Write some HTML/CSS code that generates the following
http://www.cs.dartmouth.edu/~fwp/exercise/html.html
http://www.cs.dartmouth.edu/~fwp/lecture05/book.png
#F2FCF4
#35B14F
link
float right
<p> with bgcolor
and link
CSS: tag attributes
a:link {
color: red;
}
a:visited {
color: gray;
}
a:hover {
color: green;
}
a:active {
color: blue;
}
CSS: tag attributes
CSS: tag attributes
CSS: <span>
CSS: <span>
CSS: <span>
CSS: <div>
CSS: <div>
CSS: <div>
CSS: <div>
CSS: <div>
CSS: <div>

 Download  Report

Paperzz.com

Your Paperzz

© Copyright 2026 Paperzz