Harvard University Extension School
Spring 2018
Course Web Site: http://cscie12.dce.harvard.edu/
Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu
Image from Opte Project and is used under the Creative Commons Attribution-NonCommercial 4.0 International License.
Web 25th Anniversary (2014)
Today, and throughout this year, we should celebrate the Web’s first 25 years. But though the mood is upbeat, we also know we are not done. We have much to do for the Web to reach its full potential. We must continue to defend its core principles and tackle some key challenges.
Tim Berners-Lee in Welcome to the Web's 25 Anniversary
The Web evolved into a powerful, ubiquitous tool because it was built on egalitarian principles and because thousands of individuals, universities and companies have worked, both independently and together as part of the World Wide Web Consortium, to expand its capabilities based on those principles.
Tim Berners-Lee in Long Live the Web (Scientific American, Nov/Dec 2010)
The irony is that in all its various guises -- commerce, research, and surfing -- the Web is already so much a part of our lives that familiarity has clouded our perception of the Web itself.
Tim Berners-Lee in Weaving the Web (1999)
The White House Site (www.whitehouse.gov)
1996
| 1997
|
1997
| 1998
|
1998
| 1999
|
1999
| 2001
|
2001
| 2002
|
2002
| 2007
|
2007
| 2009
|
2009
| 2011
|
2011
| 2015 - Early
|
2015 - Early
| 2015 - Late
|
2017 - January. A new administration.
| 2017 - August
|
2017 - August
| 2018 - January. A simplified design, less complicated, fewer links to content. Note the absence of the "mega" footer and "mega" header drop downs.
|
http://www.whitehouse.gov/our-government/the-constitution
http://www.whitehouse.gov/our-government/the-constitution
http://www.whitehouse.gov/our-government/the-constitution
http://www.whitehouse.gov/our-government/the-constitution
![]() | ![]() |
![]() | ![]() |
Network connecting HTTP client with server.
<!DOCTYPE html>
<html>
<head>
<title>My Schools</title>
</head>
<body>
<h1>My Schools</h1>
<ul>
<li>
<a href="http://www.harvard.edu/">Harvard University</a><br/>
<img src="images/veritas.gif" alt="Harvard Shield" />
</li>
<li>
<a href="http://www.ku.edu/">University of Kansas</a><br/>
<img src="images/KUSeal.gif" alt="University of Kansas Seal" />
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Title</title>
</head>
<body>
<!-- content goes here -->
</body>
</html>
Markup for a Hypertext link:
<a href="http://www.harvard.edu/">Harvard</a>
How it would render in a web browser:
Start Tag<a href="http://www.harvard.edu/">Harvard</a>
Element Name<a href="http://www.harvard.edu/">Harvard</a>
Attribute<a href="http://www.harvard.edu/">Harvard</a>
Attribute Value <a href="http://www.harvard.edu/">Harvard</a>
Content <a href="http://www.harvard.edu/">Harvard</a>
End Tag <a href="http://www.harvard.edu/">Harvard</a>
"Postel's Law" or the "Robustness Principle"
Main differences between HTML/SGML and XML:
HTML | XML | |
---|---|---|
1. | End tags can be "implied" Closing elements that have implied end tags
| End tags always required (even for "empty" elements)
|
2. | Start tags can be "implied"
| Start tags always required
|
3. | Element and attribute names are not case-sensitive
| Element and attribute names are case-sensitive
|
4. | Attribute values do not need to be in quotes if the values contain
alpha-numeric characters only
| Attribute values must always be in quotes
|
XML Syntax
| SGML/HTML Syntax
|
Markup - XML syntax Validate with Nu Html Checker | Markup - SGML/HTML syntax Validate with Nu Html Checker |
117 elements defined in HTML5
More information: HTML5 Living Standard from the WHATWG. Section 4 contains the List of elements in HTML.
html
head
title
base
link
meta
style
body
article
section
nav
aside
h1
, h2
, h3
, h4
, h5
, h6
hgroup
header
footer
address
p
hr
pre
blockquote
ol
ul
li
dl
dt
dd
figure
figcaption
main
div
a
em
strong
small
s
cite
q
dfn
abbr
ruby
rt
rp
data
time
code
var
samp
kbd
sub
sup
i
b
u
mark
bdi
bdo
span
br
wbr
ins
del
picture
source
img
iframe
embed
object
param
video
audio
source
track
map
area
table
caption
colgroup
col
tbody
thead
tfoot
tr
td
th
form
label
input
button
select
datalist
optgroup
option
textarea
output
progress
meter
fieldset
legend
details
summary
menu
dialog
script
noscript
template
canvas
slot
Start with these 17 — these are elements are found in an overwhelming majority of web pages!
Copyright © David Heitmeyer