CS/COE 1520
WWW, HTML & CSS
The World Wide Web
"a part of the Internet accessed through a graphical user interface
and containing documents often connected by hyperlinks —called
also Web"
TERRIBLE
DEFINITION
2
The World Wide Web
"The World Wide Web (WWW) is an information space where
documents and other web resources are identified by URLs,
interlinked by hypertext links, and can be accessed via the
Internet"
3
● 1945: Vannevar Bush proposed the "memex", a device for
storing and linking information stored on mircrofilm
● 1963: Ted Nelson coined the term "hypertext" as a text
approach breaking away from traditional linear limitations
● Sir Tim Berners-Lee
History of the web
○ 1980: proposed ENQUIRE as a
hypertext documentation system
for CERN in Switzerland
○ 1989: proposed implementing a
hypermedia system on top of the
Internet, inventing the Web
○ 1990: wrote the first web browser
(called WorldWideWeb)
4
5
Hypertext
6
● Web documents are commonly formatted and annotated
using the HyperText Markup Language
○ First references to HTML made by Sir Tim in 1991
○ First real standard proposed in 1995 with HTML 2.0
○ Current version is HTML5
● HTML documents are built out of HTML elements
○ Elements are delineated by tags
HTML
7
● HTML5 documents have the following basic shell:





Intro to HTML
8
● Most tags are pairs, start and end tags:
○

This text would be considered a paragraph

○ This text would be emphasized
● Comments have their own start and end tags:
○
○
● There are also self closing tags
○

● Tags also have attributes
○ click here!
HTML tag basics
9
● id allows you target a specific instance of an element
○



id and class attributes
10
● class allows you target a group of elements
○



● HTML is used to present the structure of a document
○ What/where text should be displayed
○ Where images should be placed
● It is often used in conjunction with Cascading Style Sheets
(CSS), which describe the presentation of the document
○ Colors, fonts, etc.
● Italics example:
○ this will be italicized
○ span.italics {font-style: italic;}
● … Emphasis tag () normally displays in italics
○ Difference?
Modern use of HTML
11
● Browsers have default stylings for many elements that can be
overridden
Italicized emphasis isn't the only default style
12
● CSS target examples:
○ HTML elements
■ span {
color: red;
}
○ Specific ids
■ #unique {
color: blue;
}
○ Specific classes
■ .custom {
color: green;
}
○ Combinations
■ span#unique {
color: yellow;
}
CSS Selectors
13
● HTML + CCS code example
Codes Examples