Lecture Web Development
Uploaded by
msaimsiddiq5Lecture Web Development
Uploaded by
msaimsiddiq5Video 1.
1
Chris Murphy
1
Property of Penn Engineering, Chris Murphy SD4x-1
What is the Internet?
• Internet – network of machines (servers, clients, routers,
switches, etc.) connected by media (fiber, wifi, etc.) that
allows communication among devices
Property of Penn Engineering, Chris Murphy SD4x-1 2
The Internet
• We can think of the Internet as a graph:
• Nodes represent devices and information
• Edges represent a connection (physical or virtual)
Property of Penn Engineering, Chris Murphy SD4x-1 3
Property of Penn Engineering, Chris Murphy SD4x-1 4
World Wide Web == Internet?
• No! They’re not the same!
• The World Wide Web is an application that operates over
the Internet
• Internet provides infrastructure
• World Wide Web utilizes the infrastructure to run an application
on which users connect and exchange data
• Other applications use the Internet as well, e.g email
Property of Penn Engineering, Chris Murphy SD4x-1 5
What is the World Wide Web?
• World Wide Web (WWW) – an application on the Internet
that combines many protocols to allow for communication
and transfer of data between machines
• Web is composed of documents that are logically linked to
each other
• Originally designed to:
• Provide easy access to documents for anyone
• Provide way in which users can discover documents through a
browser
Property of Penn Engineering, Chris Murphy SD4x-1 6
The World Wide Web
• Web follows similar network structure as the Internet
• Web pages link to other web pages, thus forming a graph
where:
• Nodes represent an individual document/resource
• Edges represent a link from one document/resource to another
(directed edges)
Property of Penn Engineering, Chris Murphy SD4x-1 7
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
Property of Penn Engineering, Chris Murphy SD4x-1 8
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1 9
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
[Link]
Protocol
Property of Penn Engineering, Chris Murphy SD4x-1 10
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
[Link]
Protocol Host Name
Property of Penn Engineering, Chris Murphy SD4x-1 11
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
Domain Name
[Link]
Protocol Host Name
Property of Penn Engineering, Chris Murphy SD4x-1 12
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
Domain Name
[Link]
Protocol Host Name File Path
Property of Penn Engineering, Chris Murphy SD4x-1 13
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
Domain Name
[Link]
Protocol Host Name File Path Query Parameters
Property of Penn Engineering, Chris Murphy SD4x-1 14
Web Page Addresses
• Uniform Resource Identifier (URI) – alphanumeric string
of characters used to uniquely identify a web page or
resource
• Uniform Resource Locator (URL): type of URI that
specifies the location on the WWW and the mechanism
(protocol) for retrieving it
Domain Name
[Link]
Protocol Host Name File Path Query Parameters
Property of Penn Engineering, Chris Murphy SD4x-1 15
Content on the World Wide Web
• Static: same for all users and at all times
• Appearance may vary based on specific browser, but
content itself is the same
• Technologies: HTML, CSS
• Dynamic: programmatically generated depending on
the user, context, configuration, arguments, etc.
• Technologies: JavaScript
Property of Penn Engineering, Chris Murphy SD4x-1 16
Looking Ahead
• How does a browser request a web page or
resource?
• what does it send?
• what does it receive?
• Once the content is received, how does a browser
display it?
• Later: how can you write programs to generate
dynamic content in the browser?
Property of Penn Engineering, Chris Murphy SD4x-1 17
Video 1.2
Chris Murphy
Property of Penn Engineering, Chris Murphy SD4x-1 18
Review
• The Internet is a physical network of devices
• The World Wide Web is an application that
utilizes the Internet to allow for accessing data
• Resources on the Web have unique URLs that
include the protocol, host name, and file/resource
name
Property of Penn Engineering, Chris Murphy SD4x-1 19
Property of Penn Engineering, Chris Murphy SD4x-1 20
Property of Penn Engineering, Chris Murphy SD4x-1 21
Property of Penn Engineering, Chris Murphy SD4x-1 22
Popular Browsers
Property of Penn Engineering, Chris Murphy SD4x-1 23
What is a Web Browser?
• Browser: software that is used to access and display Web
content, and to navigate across the Web
• Main Components of the Browser
• Rendering Engine (HTML/CSS) – responsible for static content
presentation, formatting, and layout
• JavaScript Engine (JavaScript) – responsible for creating and
modifying dynamic content and appearance
Property of Penn Engineering, Chris Murphy SD4x-1 24
How Does a Web Browser Work?
• Browser and the World Wide Web utilize Hypertext
Transfer Protocol (HTTP) to transfer documents
Property of Penn Engineering, Chris Murphy SD4x-1 25
How Does a Web Browser Work?
• Browser and the World Wide Web utilize Hypertext
Transfer Protocol (HTTP) to transfer documents
Client
Property of Penn Engineering, Chris Murphy SD4x-1 26
How Does a Web Browser Work?
• Browser and the World Wide Web utilize Hypertext
Transfer Protocol (HTTP) to transfer documents
Client Server
Property of Penn Engineering, Chris Murphy SD4x-1 27
How Does a Web Browser Work?
• Browser and the World Wide Web utilize Hypertext
Transfer Protocol (HTTP) to transfer documents
1 Client sends request
Client Server
Property of Penn Engineering, Chris Murphy SD4x-1 28
How Does a Web Browser Work?
• Browser and the World Wide Web utilize Hypertext
Transfer Protocol (HTTP) to transfer documents
1 Client sends request
Server sends response
2
Client Server
Property of Penn Engineering, Chris Murphy SD4x-1 29
HTTP Overview
• HTTP is a plain-text, human-readable protocol used for
exchanging data on the Web
• Initially developed by Tim Berners-Lee at CERN in
1989
• Based on client-server model:
• Client sends request for resource, possibly including
information about the client
• Server sends response, including header (status
information) and requested resource
Property of Penn Engineering, Chris Murphy SD4x-1 30
Property of Penn Engineering, Chris Murphy SD4x-1 31
Anatomy of an HTTP Request
• First line of request will always be a verb followed by an
argument
• GET – retrieve resource
• HEAD – retrieve only headers (information about the resource)
• POST – create resource (usually used in form submission
context)
• Next comes the protocol (usually HTTP/1.1)
• Optionally include other information about the request
and/or the client
1 Client sends request
Property of Penn Engineering, Chris Murphy SD4x-1 32
HTTP Request Example
GET /examples/[Link] HTTP/1.1
Host: [Link]
User-Agent: Mozilla/4.0
Accept-Language: en-us
Content-Length: 9
a=12&b=34
Property of Penn Engineering, Chris Murphy SD4x-1 33
HTTP Request Example
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0
Accept-Language: en-us
Content-Length: 9
a=12&b=34
Property of Penn Engineering, Chris Murphy SD4x-1 34
HTTP Request Example
Request Verb
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0
Accept-Language: en-us
Content-Length: 9
a=12&b=34
Property of Penn Engineering, Chris Murphy SD4x-1 35
HTTP Request Example
Request Verb URI
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0
Accept-Language: en-us
Content-Length: 9
a=12&b=34
Property of Penn Engineering, Chris Murphy SD4x-1 36
HTTP Request Example
Request Verb URI HTTP Version
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0
Accept-Language: en-us
Content-Length: 9
a=12&b=34
Property of Penn Engineering, Chris Murphy SD4x-1 37
HTTP Request Example
Request Verb URI HTTP Version
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0 Request
Accept-Language: en-us Headers
Content-Length: 9
a=12&b=34
Property of Penn Engineering, Chris Murphy SD4x-1 38
HTTP Request Example
Request Verb URI HTTP Version
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0 Request
Accept-Language: en-us Headers
Content-Length: 9
Blank Line Separator
a=12&b=34
Property of Penn Engineering, Chris Murphy SD4x-1 39
HTTP Request Example
Request Verb URI HTTP Version
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0 Request
Accept-Language: en-us Headers
Content-Length: 9
Blank Line Separator
a=12&b=34 Request Message Body
Property of Penn Engineering, Chris Murphy SD4x-1 40
HTTP Request Example
Request Verb URI HTTP Version
GET /examples/[Link] HTTP/1.1 Request Line
Host: [Link]
User-Agent: Mozilla/4.0 Request
Accept-Language: en-us Headers
Content-Length: 9
Blank Line Separator
a=12&b=34 Request Message Body
Property of Penn Engineering, Chris Murphy SD4x-1 41
Anatomy of an HTTP Response
• First line is always protocol and status code
• 1XX – information only
• 2XX – success
• 3XX – client redirect
• 4XX – client error
• 5XX – server error
Server sends response 2
Property of Penn Engineering, Chris Murphy SD4x-1 42
Most Common Status Codes
• 200 OK – request succeeded, resulting resource
(as stated in request) will be included in message
body
• 404 Not Found – requested resource does not
exist
• 500 Server Error – Error on the server side in
processing request
Server sends response 2
Property of Penn Engineering, Chris Murphy SD4x-1 43
Anatomy of an HTTP Response
• Following protocol and status code will be other
header information regarding the response
and/or the server
• Then a blank line
• Then the response body, i.e. the resource that was
requested
Server sends response 2
Property of Penn Engineering, Chris Murphy SD4x-1 44
HTTP Response Example
HTTP/1.1 200 OK
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4
Last-Modified: Wed, 04 Apr xxxx
Connection: close
Content-Type: text/html
Content-Length: 228
<!DOCTPYE html><html><head>….
Property of Penn Engineering, Chris Murphy SD4x-1 45
HTTP Response Example
HTTP/1.1 200 OK Response Line
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4
Last-Modified: Wed, 04 Apr xxxx
Connection: close
Content-Type: text/html
Content-Length: 228
<!DOCTPYE html><html><head>….
Property of Penn Engineering, Chris Murphy SD4x-1 46
HTTP Response Example
HTTP Version
HTTP/1.1 200 OK Response Line
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4
Last-Modified: Wed, 04 Apr xxxx
Connection: close
Content-Type: text/html
Content-Length: 228
<!DOCTPYE html><html><head>….
Property of Penn Engineering, Chris Murphy SD4x-1 47
HTTP Response Example
HTTP Version Status Code
HTTP/1.1 200 OK Response Line
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4
Last-Modified: Wed, 04 Apr xxxx
Connection: close
Content-Type: text/html
Content-Length: 228
<!DOCTPYE html><html><head>….
Property of Penn Engineering, Chris Murphy SD4x-1 48
HTTP Response Example
HTTP Version Status Code
HTTP/1.1 200 OK Response Line
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4 Response
Last-Modified: Wed, 04 Apr xxxx Headers
Connection: close
Content-Type: text/html
Content-Length: 228
<!DOCTPYE html><html><head>….
Property of Penn Engineering, Chris Murphy SD4x-1 49
HTTP Response Example
HTTP Version Status Code
HTTP/1.1 200 OK Response Line
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4 Response
Last-Modified: Wed, 04 Apr xxxx Headers
Connection: close
Content-Type: text/html
Content-Length: 228
Blank Line Separator
<!DOCTPYE html><html><head>….
Property of Penn Engineering, Chris Murphy SD4x-1 50
HTTP Response Example
HTTP Version Status Code
HTTP/1.1 200 OK Response Line
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4 Response
Last-Modified: Wed, 04 Apr xxxx Headers
Connection: close
Content-Type: text/html
Content-Length: 228
Blank Line Separator
<!DOCTPYE html><html><head>…. Response
Body (Resource)
Property of Penn Engineering, Chris Murphy SD4x-1 51
HTTP Response Example
HTTP Version Status Code
HTTP/1.1 200 OK Response Line
Date: Fri, 06 Apr xxxx 09:30:00 GMT
Server: Apache/1.4 Response
Last-Modified: Wed, 04 Apr xxxx Headers
Connection: close
Content-Type: text/html
Content-Length: 228
Blank Line Separator
<!DOCTPYE html><html><head>…. Response
Body (Resource)
Property of Penn Engineering, Chris Murphy SD4x-1 52
Summary
• Web browsers are used to access data on the Web
• Browsers communicate with web servers using HTTP
• HTTP is based on a client-server model:
• Client sends request for resource, possibly including
information about the client
• Server sends response, including header (status
information) and requested resource
Property of Penn Engineering, Chris Murphy SD4x-1 53
Video 1.3
Chris Murphy
Property of Penn Engineering, Chris Murphy SD4x-1 54
Review
• Browser and the World Wide Web utilize Hypertext
Transfer Protocol (HTTP) to transfer documents
• Uses the following structure:
1 Client sends request
Server sends response
2
Client Server
Property of Penn Engineering, Chris Murphy SD4x-1 55
HTML
• Hypertext Markup Language (HTML) – standard
used to describe format and structure with which
content should be displayed on a web page
• Document contains elements
• Each element generally includes a start tag, some
content, and an end tag
Property of Penn Engineering, Chris Murphy SD4x-1 56
HTML
• Hypertext Markup Language (HTML) – standard
used to describe format and structure with which
content should be displayed on a web page
• Document contains elements
• Each element generally includes a start tag, some
content, and an end tag
<p> This is a paragraph. </p>
Property of Penn Engineering, Chris Murphy SD4x-1 57
HTML
• Hypertext Markup Language (HTML) – standard
used to describe format and structure with which
content should be displayed on a web page
• Document contains elements
• Each element generally includes a start tag, some
content, and an end tag
<p> This is a paragraph. </p>
Start Tag
Property of Penn Engineering, Chris Murphy SD4x-1 58
HTML
• Hypertext Markup Language (HTML) – standard
used to describe format and structure with which
content should be displayed on a web page
• Document contains elements
• Each element generally includes a start tag, some
content, and an end tag
<p> This is a paragraph. </p>
Start Tag
Content
Property of Penn Engineering, Chris Murphy SD4x-1 59
HTML
• Hypertext Markup Language (HTML) – standard
used to describe format and structure with which
content should be displayed on a web page
• Document contains elements
• Each element generally includes a start tag, some
content, and an end tag
<p> This is a paragraph. </p>
Start Tag
Content End Tag
Property of Penn Engineering, Chris Murphy SD4x-1 60
HTML
• Hypertext Markup Language (HTML) – standard
used to describe format and structure with which
content should be displayed on a web page
• Document contains elements
• Each element generally includes a start tag, some
content, and an end tag
<p> This is a paragraph. </p>
Start Tag
Content End Tag
Property of Penn Engineering, Chris Murphy SD4x-1 61
HTML
• HTML is a plain-text, human-readable language
that is used for representing content on the Web
• HTML specifies how to structure the data but not
(necessarily) how to display it
• The browser chooses how to display the content
Property of Penn Engineering, Chris Murphy SD4x-1 62
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 63
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 64
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 65
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 66
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 67
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 68
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 69
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 70
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 71
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 72
HTML
• HTML structure is hierarchical
• Elements may be nested, i.e. content of an
element can be another element
<!DOCTYPE html>
<html>
<head>
<title>
My First Web Page
</title>
</head>
<body>
Hello, World!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 73
Important HTML Tags: <!DOCTYPE>
• NOT actually a tag, rather a declaration to the web
browser of what version of html the following
document uses
• For HTML5, doctype declaration is as follows:
<!DOCTYPE html>
• This declaration must be the very first line of an
html document
<!DOCTYPE html>
(all content of html document should go
below this declaration)
Property of Penn Engineering, Chris Murphy SD4x-1 74
Important HTML Tags: <html>
• After the declaration, HTML pages must start with
the <html> tag
• Often referred to as the root element because it
can be considered the root of the tree-like
structure of elements in an HTML page
<!DOCTYPE html>
<html>
(all other elements should go here)
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 75
Important HTML Tags: <head>
• Contains information about the document, not content
<!DOCTYPE>
<html>
<head>
<title>My Web Page 2.0</title>
<link rel="stylesheet" type="text/css" href="/[Link]">
<meta name="description" content="Learning about HTML.">
<meta name="keywords" content="html, web development">
<script src="[Link]"></script>
</head>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 76
Important HTML Tags: <head>
• Contains information about the document, not content
• Common elements included within <head></head>:
• <title> - contains page title, displayed in browser’s title bar
<!DOCTYPE>
<html>
<head>
<title>My Web Page 2.0</title>
<link rel="stylesheet" type="text/css" href="/[Link]">
<meta name="description" content="Learning about HTML.">
<meta name="keywords" content="html, web development">
<script src="[Link]"></script>
</head>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 77
Important HTML Tags: <head>
• Contains information about the document, not content
• Common elements included within <head></head>:
• <title> - contains page title, displayed in browser’s title bar
• <link> – used to add CSS stylesheets and icons to page
<!DOCTYPE>
<html>
<head>
<title>My Web Page 2.0</title>
<link rel="stylesheet" type="text/css" href="/[Link]">
<meta name="description" content="Learning about HTML.">
<meta name="keywords" content="html, web development">
<script src="[Link]"></script>
</head>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 78
Important HTML Tags: <head>
• Contains information about the document, not content
• Common elements included within <head></head>:
• <title> - contains page title, displayed in browser’s title bar
• <link> – used to add CSS stylesheets and icons to page
• <meta> – used to specify metadata like page descriptions and keywords
<!DOCTYPE>
<html>
<head>
<title>My Web Page 2.0</title>
<link rel="stylesheet" type="text/css" href="/[Link]">
<meta name="description" content="Learning about HTML.">
<meta name="keywords" content="html, web development">
<script src="[Link]"></script>
</head>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 79
Important HTML Tags: <head>
• Contains information about the document, not content
• Common elements included within <head></head>:
• <title> - contains page title, displayed in browser’s title bar
• <link> – used to add CSS stylesheets and icons to page
• <meta> – used to specify metadata like page descriptions and keywords
• <script> – used to add JavaScript code to the page
<!DOCTYPE>
<html>
<head>
<title>My Web Page 2.0</title>
<link rel="stylesheet" type="text/css" href="/[Link]">
<meta name="description" content="Learning about HTML.">
<meta name="keywords" content="html, web development">
<script src="[Link]"></script>
</head>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 80
Important HTML Tags: <head>
• Contains information about the document, not content
• Common elements included within <head></head>:
• <title> - contains page title, displayed in browser’s title bar
• <link> – used to add CSS stylesheets and icons to page
• <meta> – used to specify metadata like page descriptions and keywords
• <script> – used to add JavaScript code to the page
<!DOCTYPE>
<html>
<head>
<title>My Web Page 2.0</title>
<link rel="stylesheet" type="text/css" href="/[Link]">
<meta name="description" content="Learning about HTML.">
<meta name="keywords" content="html, web development">
<script src="[Link]"></script>
</head>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 81
Important HTML Tags: <body>
• Appears directly beneath the head element
• Contains all web page content (images, text, etc.)
• Most web pages have one single body element
<!DOCTYPE html>
<html>
<head>
. . .
</head>
<body>
Hello world!
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 82
HTML and HTTP
• When a browser
makes a request for
a document (e.g.
[Link]), the
HTML will be
returned in the body
of the response and
displayed in the
browser
Property of Penn Engineering, Chris Murphy SD4x-1 83
HTML and HTTP
• When a browser GET /[Link] HTTP/1.1
Host: [Link]
makes a request for User-Agent: Mozilla/4.0
a document (e.g. Accept-Language: en-us
[Link]), the
HTML will be
returned in the body
of the response and
displayed in the
browser
Property of Penn Engineering, Chris Murphy SD4x-1 84
HTML and HTTP
• When a browser GET /[Link] HTTP/1.1
Host: [Link]
makes a request for User-Agent: Mozilla/4.0
a document (e.g. Accept-Language: en-us
[Link]), the
HTML will be
returned in the body
of the response and
displayed in the
browser
Property of Penn Engineering, Chris Murphy SD4x-1 85
HTML and HTTP
• When a browser GET /[Link] HTTP/1.1
Host: [Link]
makes a request for User-Agent: Mozilla/4.0
a document (e.g. Accept-Language: en-us
[Link]), the
HTML will be HTTP/1.1 200 OK
Date: Fri, 06 Apr XXXX 09:30:00 GMT
returned in the body Server: Apache/1.4
of the response and Last-Modified: Wed, 04 Apr XXXX
Connection: close
displayed in the Content-Type: text/html
Content-Length: 228
browser <!DOCTYPE html> <html> <head> <title>
My First Web Page </title> </head>
<body> Hello, World! </body> </html>
Property of Penn Engineering, Chris Murphy SD4x-1 86
HTML and HTTP
• When a browser GET /[Link] HTTP/1.1
Host: [Link]
makes a request for User-Agent: Mozilla/4.0
a document (e.g. Accept-Language: en-us
[Link]), the
HTML will be HTTP/1.1 200 OK
Date: Fri, 06 Apr XXXX 09:30:00 GMT
returned in the body Server: Apache/1.4
of the response and Last-Modified: Wed, 04 Apr XXXX
Connection: close
displayed in the Content-Type: text/html
Content-Length: 228
browser <!DOCTYPE html> <html> <head> <title>
My First Web Page </title> </head>
<body> Hello, World! </body> </html>
Property of Penn Engineering, Chris Murphy SD4x-1 87
Property of Penn Engineering,
88 Chris Murphy SD4x-1
Environment Setup
1. Download a text editor
2. Once installed, create new text file
3. Write HTML in file
4. Save document as “[Link]”
5. Open local file ([Link]) in browser
6. You can view the HTML source in the browser!
Property of Penn Engineering, Chris Murphy SD4x-1 89
Property of Penn Engineering,
90 Chris Murphy SD4x-1
Property of Penn Engineering,
91 Chris Murphy SD4x-1
Property of Penn Engineering,
92 Chris Murphy SD4x-1
Property of Penn Engineering,
93 Chris Murphy SD4x-1
Looking Ahead
• How else can we structure the content in HTML?
• How can we affect the appearance of the content?
Property of Penn Engineering, Chris Murphy SD4x-1 94
Video 1.4
Chris Murphy
Property of Penn Engineering, Chris Murphy SD4x-1 95
Review
• HTML is a plain-text, human-readable language
that is used for representing content on the Web
• HTML specifies how to structure the data but not
(necessarily) how to display it
• The browser chooses how to display the content
Property of Penn Engineering, Chris Murphy SD4x-1 96
Review: HTML Tags
• <!DOCTYPE> specifies the version of HTML
• <html> root of the entire document
• <head> section that provides the page title, meta
information, includes other files, etc.
• <body> the actual content
Property of Penn Engineering, Chris Murphy SD4x-1 97
Property of Penn Engineering,
98 Chris Murphy SD4x-1
Property of Penn Engineering, Chris Murphy SD4x-1 99
Important HTML Tags: <p>
• Appears anywhere within the body to represent a
paragraph of text expressing a single thought
• Usually displayed with vertical space before and after
paragraph
Property of Penn Engineering, Chris Murphy SD4x-1 100
Important HTML Tags: <p>
• Appears anywhere within the body to represent a
paragraph of text expressing a single thought
• Usually displayed with vertical space before and after
paragraph
<!DOCTYPE html>
<head> . . . </head>
<body>
(all web content goes here!)
<p> This is a paragraph within the p tag that expresses a single thought or
idea. The paragraph should be surrounded with a vertical white space
buffer both before and after the paragraph. </p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 101
HTML Content
• Remember, the HTML specifies the structure but not how
the content will be displayed
• It is up to the browser to decide how to display the content
<p>
This is some text.
This is some more text.
And here’s a little bit more.
</p>
Property of Penn Engineering, Chris Murphy SD4x-1 102
HTML Content
• Remember, the HTML specifies the structure but not how
the content will be displayed
• It is up to the browser to decide how to display the content
<p>
This is some text.
This is some more text.
And here’s a little bit more.
</p>
Property of Penn Engineering, Chris Murphy SD4x-1 103
Important HTML Tags: <h#>
• Referred to as section heading tags
• HTML supports 6 heading tags
h1 • <h1> used for most important titles (ex: title of entire
web page)
h2 • <h2> used for next important subheader
h3 • <h6> used for least important subheader
h4 • Magnitude of importance affects font size that will be
h5 displayed
h6
• Can be used to divide content into readable subsections
• Browser determines font and size depending on header
magnitude
Property of Penn Engineering, Chris Murphy SD4x-1 104
Important HTML Tags: <h#>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font
size of the subheader is smaller than the size of the most important
header. </p>
</body>
Property of Penn Engineering, Chris Murphy SD4x-1 105
Important HTML Tags: <h#>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font
size of the subheader is smaller than the size of the most important
header. </p>
</body>
Property of Penn Engineering, Chris Murphy SD4x-1 106
Important HTML Tags: <h#>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font
size of the subheader is smaller than the size of the most important
header. </p>
</body>
Property of Penn Engineering, Chris Murphy SD4x-1 107
Important HTML Tags: <h#>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font
size of the subheader is smaller than the size of the most important
header. </p>
</body>
Property of Penn Engineering, Chris Murphy SD4x-1 108
Important HTML Tags: <h#>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font
size of the subheader is smaller than the size of the most important
header. </p>
</body>
Property of Penn Engineering, Chris Murphy SD4x-1 109
Important HTML Tags: <h#>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font
size of the subheader is smaller than the size of the most important
header. </p>
</body>
Property of Penn Engineering, Chris Murphy SD4x-1 110
Important HTML Tags: <h#>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font
size of the subheader is smaller than the size of the most important
header. </p>
</body>
Property of Penn Engineering, Chris Murphy SD4x-1 111
Important HTML Tags: <b> and <i>
• <b> indicates that the text should be bold
• <i> indicates that the text should be italicized
• Similar tags are <strong> and <em>, respectively, which
are meant to demonstrate that the text is “important”
Property of Penn Engineering, Chris Murphy SD4x-1 112
Important HTML Tags: <hr> and <br>
• Both tags used to mark a break in content
• <hr> Represents a more serious shift in content, visually
separates content by inserting a visible line between preceding
and subsequent content
• <br> Represents a single line break, inserts a blank line
Property of Penn Engineering, Chris Murphy SD4x-1 113
Important HTML Tags
• Both tags used to mark a break in content
• <hr> Represents a more serious shift in content, visually
separates content by inserting a visible line between preceding
and subsequent content
• <br> Represents a single line break, inserts a blank line
<p> This is a paragraph about
how your browser works. </p>
<hr>
<p> This is a paragraph about
how to set up your environment
to begin creating HTML
documents. </p>
<br>
<p> This is a paragraph about
important HTML tags that
you should know. </p> SD4x-1
Property of Penn Engineering, Chris Murphy 114
Important HTML Tags: <hr> and <br>
• Both tags used to mark a break in content
• <hr> Represents a more serious shift in content, visually
separates content by inserting a visible line between preceding
and subsequent content
• <br> Represents a single line break, inserts a blank line
<p> This is a paragraph about
how your browser works. </p>
<hr>
<p> This is a paragraph about
how to set up your environment
to begin creating HTML
documents. </p>
<br>
<p> This is a paragraph about
important HTML tags that
you should know. </p> SD4x-1
Property of Penn Engineering, Chris Murphy 115
Important HTML Tags: <hr> and <br>
• Both tags used to mark a break in content
• <hr> Represents a more serious shift in content, visually
separates content by inserting a visible line between preceding
and subsequent content
• <br> Represents a single line break, inserts a blank line
<p> This is a paragraph about
how your browser works. </p>
<hr>
<p> This is a paragraph about
how to set up your environment
to begin creating HTML
documents. </p>
<br>
<p> This is a paragraph about
important HTML tags that
you should know. </p> SD4x-1
Property of Penn Engineering, Chris Murphy 116
Important HTML Tags: <hr> and <br>
• Both tags used to mark a break in content
• <hr> Represents a more serious shift in content, visually
separates content by inserting a visible line between preceding
and subsequent content
• <br> Represents a single line break, inserts a blank line
<p> This is a paragraph about
how your browser works. </p>
<hr>
<p> This is a paragraph about
how to set up your environment
to begin creating HTML
documents. </p>
<br>
<p> This is a paragraph about
important HTML tags that
you should know. </p> SD4x-1
Property of Penn Engineering, Chris Murphy 117
Important HTML Tags: <div>
• Provides additional structure to web page
• Block-level container for organized content
• Often used for: <div>
<h3> Thought of the Day </h3>
• Page headers/footers
<p>Today's thought of the day: "Don't
• Menu or Navigation bar make excuses, make improvements"
-Tyra Banks</p>
• Photo galleries <p>Additional supporting text</p>
• Ads or outside media </div>
Property of Penn Engineering, Chris Murphy SD4x-1 118
Important HTML Tags: <span>
• Inline container for organized content
• Similar to div but different in the following ways;
• Block-level elements (div) are designed to contain larger chunks
of content designed to stand alone as a unit; always starts with a
new line
• Inline elements
(span) designed to <p>Today we've learned about
contain smaller <span>DOCTYPE declarations</span>,
pieces of content, <span>head tags</span>,
usually within a <span> body tags</span>,
larger block of <span>heading tags</span>,
content; does not <span>paragraph tags</span>, and
start with new line <span>Inline vs. Block-level
containers</span>.
</p>
Property of Penn Engineering, Chris Murphy SD4x-1 119
Important HTML Tags: <!-- Comments -->
• Text in the HTML that will not be rendered in the browser
• Often used for:
• Explaining the HTML to or leaving notes for other programmers
• Temporarily removing HTML content
<!-- This is a listing of some important people -->
<br>Eliana
<br>Swapneel
<!-- <br>Chris -->
<br>Lydia
Property of Penn Engineering, Chris Murphy SD4x-1 120
HTML Symbols & Special Characters
HTML Appearance
Entity
Non-breaking space; allows for extra
white space between words
Property of Penn Engineering, Chris Murphy SD4x-1 121
HTML Symbols & Special Characters
HTML Appearance
Entity
Non-breaking space; allows for extra
white space between words
< <
> >
Property of Penn Engineering, Chris Murphy SD4x-1 122
HTML Symbols & Special Characters
HTML Appearance
Entity
Non-breaking space; allows for extra
white space between words
< <
> >
& &
Property of Penn Engineering, Chris Murphy SD4x-1 123
HTML Symbols & Special Characters
HTML Appearance
Entity
Non-breaking space; allows for extra
white space between words
< <
> >
& &
© ©
® ®
Property of Penn Engineering, Chris Murphy SD4x-1 124
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 125
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 126
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 127
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 128
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 129
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 130
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 131
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 132
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 133
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 134
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 135
Putting It All Together
<!DOCTYPE html>
<html>
<head>
<title>My Web Page 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content= "Learning about the most important web tags in html.">
<meta name="keywords" content= "html, web development">
</head>
<body>
<h1>This is the most important header</h1>
<p>This is a paragraph supporting the most important header.</p>
<h3>This is a subheader</h3>
<p>This is a paragraph supporting the subheader. Notice that the font size of the subheader
is smaller than the size of the most important header. </p>
<hr>
<div>
<h3> Thought of the Day </h3>
<p>Today's thought of the day: <em>"Don't make excuses, make improvements"></em>
--Tyra Banks</p>
<p>Additional supporting text</p>
</div>
<hr>
<p>Today we've learned about <span>DOCTYPE declarations</span>, <span>head tags</span>, <span>
body tags</span>, <span>heading tags</span>, <span>paragraph tags</span>, & <span>
Inline vs. Block-level containers</span>.
</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 136
Property of Penn Engineering, Chris Murphy SD4x-1 137
Summary
• HTML is a plain-text, human-readable language
that is used for representing content on the Web
• HTML specifies how to structure the data but not
(necessarily) how to display it
• HTML uses tags to provide the structure
Property of Penn Engineering, Chris Murphy SD4x-1 138
Video 1.5
Chris Murphy
Property of Penn Engineering, Chris Murphy SD4x-1 139
Review
• HTML is a plain-text, human-readable language
that is used for representing content on the Web
• HTML specifies how to structure the data but not
(necessarily) how to display it
• HTML uses tags to provide the structure
Property of Penn Engineering, Chris Murphy SD4x-1 140
Review: HTML tags
• <p> paragraph
• <h#> header
• <b> bold (also <strong>)
• <i> italics (also <em>)
• <hr> horizontal rule
• <br> break
• <div> block of text
• <span> small section of text
Property of Penn Engineering, Chris Murphy SD4x-1 141
Property of Penn Engineering, Chris Murphy SD4x-1 142
HTML Attributes
• Purpose of an attribute: provide additional information
about a particular HTML element
• Always included within element’s start tag
• Usually comes in name/value pair as follows:
name=“value”
• name – usually specifies the property of the element for which
additional information is being provided
• value –this is selected from set of possible values for given
property
Property of Penn Engineering, Chris Murphy SD4x-1 143
HTML Attributes
• Purpose of an attribute: provide additional information
about a particular HTML element
• Always included within element’s start tag
• Usually comes in name/value pair as follows:
name=“value”
• name – usually specifies the property of the element for which
additional information is being provided
• value –this is selected from set of possible values for given
property
<p name=“value”> This is a paragraph with a defined attribute </p>
Property of Penn Engineering, Chris Murphy SD4x-1 144
Core Attributes: title
• Provides a suggested title for an element
• When user hovers over the element, a “tooltip” will
appear at the cursor with the suggested title
Property of Penn Engineering, Chris Murphy SD4x-1 145
Core Attributes: title
• Provides a suggested title for an element
• When user hovers over the element, a “tooltip” will
appear at the cursor with the suggested title
<h1 title=“Welcome!”> Test Title </h1>
Property of Penn Engineering, Chris Murphy SD4x-1 146
Core Attributes: title
• Provides a suggested title for an element
• When user hovers over the element, a “tooltip” will
appear at the cursor with the suggested title
<h1 title=“Welcome!”> Test Title </h1>
Property of Penn Engineering, Chris Murphy SD4x-1 147
Core Attributes: title
• Provides a suggested title for an element
• When user hovers over the element, a “tooltip” will
appear at the cursor with the suggested title
<h1 title=“Welcome!”> Test Title </h1>
Property of Penn Engineering, Chris Murphy SD4x-1 148
Core Attributes: style
• Used to change the visual presentation of an
element
• Value string will be include multiple key:value pairs
as well (separated by semicolons)
Property of Penn Engineering, Chris Murphy SD4x-1 149
Core Attributes: style
• Used to change the visual presentation of an
element
• Value string will be include multiple key:value pairs
as well (separated by semicolons)
<h1>this is a heading</h1>
Property of Penn Engineering, Chris Murphy SD4x-1 150
Core Attributes: style
• Used to change the visual presentation of an
element
• Value string will be include multiple key:value pairs
as well (separated by semicolons)
<h1>this is a heading</h1>
Property of Penn Engineering, Chris Murphy SD4x-1 151
Core Attributes: style
• Used to change the visual presentation of an
element
• Value string will be include multiple key:value pairs
as well (separated by semicolons)
<h1>this is a heading</h1>
<h1 style="color:red; text-transform:capitalize">this is a heading</h1>
Property of Penn Engineering, Chris Murphy SD4x-1 152
Core Attributes: style
• Used to change the visual presentation of an
element
• Value string will be include multiple key:value pairs
as well (separated by semicolons)
<h1>this is a heading</h1>
<h1 style="color:red; text-transform:capitalize">this is a heading</h1>
Property of Penn Engineering, Chris Murphy SD4x-1 153
Core Attributes: style
• Used to change the visual presentation of an
element
• Value string will be include multiple key:value pairs
as well (separated by semicolons)
<h1>this is a heading</h1>
<h1 style="color:red; text-transform:capitalize">this is a heading</h1>
Property of Penn Engineering, Chris Murphy SD4x-1 154
Other properties of “style” attribute
Property Description Sample values
background-color The color that appears behind the text red, yellow, #012345
Property of Penn Engineering, Chris Murphy SD4x-1 155
Other properties of “style” attribute
Property Description Sample values
background-color The color that appears behind the text red, yellow, #012345
font-family Font used to render the text verdana, courier
Property of Penn Engineering, Chris Murphy SD4x-1 156
Other properties of “style” attribute
Property Description Sample values
background-color The color that appears behind the text red, yellow, #012345
font-family Font used to render the text verdana, courier
font-size Size of text, possibly relative to default 12px, 4in, 200%
size
Property of Penn Engineering, Chris Murphy SD4x-1 157
Other properties of “style” attribute
Property Description Sample values
background-color The color that appears behind the text red, yellow, #012345
font-family Font used to render the text verdana, courier
font-size Size of text, possibly relative to default 12px, 4in, 200%
size
text-align Horizontal text alignment center, left, right
Property of Penn Engineering, Chris Murphy SD4x-1 158
Other properties of “style” attribute
Property Description Sample values
background-color The color that appears behind the text red, yellow, #012345
font-family Font used to render the text verdana, courier
font-size Size of text, possibly relative to default 12px, 4in, 200%
size
text-align Horizontal text alignment center, left, right
Hello <span style="color:white; background-color:green;
font-family:verdana; font-size:200%">world!</span>
Property of Penn Engineering, Chris Murphy SD4x-1 159
Other properties of “style” attribute
Property Description Sample values
background-color The color that appears behind the text red, yellow, #012345
font-family Font used to render the text verdana, courier
font-size Size of text, possibly relative to default 12px, 4in, 200%
size
text-align Horizontal text alignment center, left, right
Hello <span style="color:white; background-color:green;
font-family:verdana; font-size:200%">world!</span>
Property of Penn Engineering, Chris Murphy SD4x-1 160
Other properties of “style” attribute
Property Description Sample values
background-color The color that appears behind the text red, yellow, #012345
font-family Font used to render the text verdana, courier
font-size Size of text, possibly relative to default 12px, 4in, 200%
size
text-align Horizontal text alignment center, left, right
Hello <span style="color:white; background-color:green;
font-family:verdana; font-size:200%">world!</span>
Property of Penn Engineering, Chris Murphy SD4x-1 161
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 162
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 163
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 164
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 165
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p style=“color:blue”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 166
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p style=“color:blue”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 167
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p style=“color:blue”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p style=“color:blue”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 168
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p style=“color:blue”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p style=“color:blue”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 169
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p style=“color:blue”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p style=“color:blue”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 170
Core Attributes: id and class
• Used to uniquely identify elements within an HTML
document
• id
• Provide ability to refer to specific element; id must be
unique
• Examples: header, footer
• class
• Provide ability to refer to subgroups of elements within
html document; does not have to be unique
• Examples: comment, warning
Property of Penn Engineering, Chris Murphy SD4x-1 171
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p style=“color:blue”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p style=“color:blue”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 172
<p style=“color:blue”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p style=“color:blue”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p style=“color:blue”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 173
<p class=“odd”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 174
<p class=“odd”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 175
<p class=“odd”>1 is an odd number</p>
<p style=“color:white; background-color:blue”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p style=“color:white; background-color:blue”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p style=“color:white; background-color:blue”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 176
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 177
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
Property of Penn Engineering, Chris Murphy SD4x-1 178
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 179
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 180
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 181
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 182
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 183
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 184
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 185
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 186
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 187
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: blue;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 188
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: green;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 189
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: green;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 190
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: green;
}
.even {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 191
<!DOCTYPE html>
<html>
<head>
<style>
.odd {
color: green;
}
.even {
color: white;
background-color: green;
}
</style>
</head>
<body>
<p class=“odd”>1 is an odd number</p>
<p class=“even”>2 is an even number</p>
<p class=“odd”>3 is an odd number</p>
<p class=“even”>4 is an even number</p>
<p class=“odd”>5 is an odd number</p>
<p class=“even”>6 is an even number</p>
</body>
</html>
Property of Penn Engineering, Chris Murphy SD4x-1 192
Summary
• You can use a tag’s attributes to give it properties
• The style attribute allows you to change the
appearance of the text within that element
• The class attribute allows you to group elements so
that they can easily have the same style applied
Property of Penn Engineering, Chris Murphy SD4x-1 193
Video 1.6
Chris Murphy
Property of Penn Engineering, Chris Murphy SD4x-1 194
Review
• You can use an HTML tag’s attributes to give it
properties
• The style attribute allows you to change the
appearance of the text within that element
• The class attribute allows you to group elements so
that they can easily have the same style applied
Property of Penn Engineering, Chris Murphy SD4x-1 195
Plain HTML
Property of Penn Engineering, Chris Murphy SD4x-1
196
Stylish HTML
Property of Penn Engineering, Chris Murphy SD4x-1
197
What is CSS?
• Cascading Style Sheets (CSS) are a formatting
language used to describe the appearance of content
in an HTML file
• CSS has a standardized specification defined by the
World Wide Web Consortium (W3C)
Property of Penn Engineering, Chris Murphy SD4x-1
198
Why CSS?
• HTML (“The Content”)
• What information does the page contain?
• What is in the headings, body, etc.?
• How is the information structured?
• CSS (“The Presentation”)
• What does the page look like?
• What color, formatting, text size, etc. should the
various parts have?
Property of Penn Engineering, Chris Murphy SD4x-1
199
How does CSS work?
1. The Web Browser receives the HTML page from
the server via HTTP
Property of Penn Engineering, Chris Murphy SD4x-1
200
How does CSS work?
1. The Web Browser receives the HTML page from
the server via HTTP
2. The HTML page can include CSS either in same
file or with link to separate file
• If it’s a separate file, the web browser will request that
file separately via HTTP
Property of Penn Engineering, Chris Murphy SD4x-1
201
How does CSS work? (2)
3. When all HTML and CSS files are available, the
browser will render the page
4. For each element in the HTML page, the web
browser will display the content and use the
CSS to style it
5. Ideally, exactly one set of CSS styles will apply
to any given element
6. If there are conflicting styles defined, complex
rules determine which gets applied
Property of Penn Engineering, Chris Murphy SD4x-1
202
How do we use CSS?
1. Inline: use tag’s “style” attribute to specify
appearance
2. Internal: create <style> elements in HTML and
assign to different tags, classes, etc.
3. External: specify styling in a separate CSS file
Property of Penn Engineering, Chris Murphy SD4x-1
203
Review: Inline CSS as “style” attribute
• Include CSS within the element tag itself as a
“style” attribute
Property of Penn Engineering, Chris Murphy SD4x-1
204
Review: Inline CSS as “style” attribute
• Include CSS within the element tag itself as a
“style” attribute
...
<h1 style="color:red">
Here are some memorable
quotes from movies!
</h1>
...
Property of Penn Engineering, Chris Murphy SD4x-1
205
Review: Inline CSS as “style” attribute
• Include CSS within the element tag itself as a
“style” attribute
...
<h1 style="color:red">
Here are some memorable
quotes from movies!
</h1>
...
Property of Penn Engineering, Chris Murphy SD4x-1
206
Review: Inline CSS as “style” attribute
• Include CSS within the element tag itself as a
“style” attribute
...
<h1 style="color:red">
Here are some memorable
quotes from movies!
</h1>
...
Property of Penn Engineering, Chris Murphy SD4x-1
207
Analysis: Inline CSS as “style” attribute
• Advantages
• Easy to use
• Good for quick, one-off situations
Property of Penn Engineering, Chris Murphy SD4x-1
208
Analysis: Inline CSS as “style” attribute
• Advantages
• Easy to use
• Good for quick, one-off situations
• Disadvantages
• Mixing content and presentation: this should be
avoided
• Hard to manage for large, complex pages
Property of Penn Engineering, Chris Murphy SD4x-1
209
Review: Internal CSS using <style> tag
• Include CSS within the head of the HTML using
<style> elements
Property of Penn Engineering, Chris Murphy SD4x-1
210
Review: Internal CSS using <style> tag
• Include CSS within the head of the HTML using
<style> elements
<head>
...
<style>
h1 {
color: red;
text-transform: capitalize;
}
</style>
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
Property of Penn Engineering, Chris Murphy SD4x-1
211
Review: Internal CSS using <style> tag
• Include CSS within the head of the HTML using
<style> elements
<head>
...
<style>
h1 {
color: red;
text-transform: capitalize;
}
</style>
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
Property of Penn Engineering, Chris Murphy SD4x-1
212
Review: Internal CSS using <style> tag
• Include CSS within the head of the HTML using
<style> elements
<head>
...
<style>
h1 {
color: red;
text-transform: capitalize;
}
</style>
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
Property of Penn Engineering, Chris Murphy SD4x-1
213
Review: Internal CSS using <style> tag
• Include CSS within the head of the HTML using
<style> elements
<head>
...
<style>
h1 {
color: red;
text-transform: capitalize;
}
</style>
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
Property of Penn Engineering, Chris Murphy SD4x-1
214
Review: Internal CSS using <style> tag
• Include CSS within the head of the HTML using
<style> elements
<head>
...
<style>
h1 {
color: red;
text-transform: capitalize;
}
</style>
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
Property of Penn Engineering, Chris Murphy SD4x-1
215
CSS Syntax
<style>
[Link]
h1 { nline-mooc/sd4x/code/[Link]
color: red;
text-transform: capitalize;
</style>
Property of Penn Engineering, Chris Murphy SD4x-1
216
CSS Syntax
• Selector (e.g., h1)
<style> CSS Selector
[Link]
h1 { nline-mooc/sd4x/code/[Link]
color: red;
text-transform: capitalize;
</style>
Property of Penn Engineering, Chris Murphy SD4x-1
217
CSS Syntax
• Selector (e.g., h1)
• Properties and Values (e.g., color:red)
<style> CSS Selector
[Link]
h1 { nline-mooc/sd4x/code/[Link]
color: red;
text-transform: capitalize; property: value
</style>
Property of Penn Engineering, Chris Murphy SD4x-1
218
CSS Syntax
• Selector (e.g., h1)
• Properties and Values (e.g., color:red)
<style> CSS Selector
[Link]
h1 { nline-mooc/sd4x/code/[Link]
color: red;
text-transform: capitalize; property: value
</style>
Property of Penn Engineering, Chris Murphy SD4x-1
219
Analysis: Internal CSS using <style> tag
• Advantages
• Separates content and presentation
• Easy to use
• In particular, if you want to apply the same style to all tags of a
certain type (say <p>) it’s easier to do it with internal CSS than
inline CSS
• Good if you only have a limited amount of CSS in the page
Property of Penn Engineering, Chris Murphy SD4x-1
220
Analysis: Internal CSS using <style> tag
• Advantages
• Separates content and presentation
• Easy to use
• In particular, if you want to apply the same style to all tags of a
certain type (say <p>) it’s easier to do it with internal CSS than
inline CSS
• Good if you only have a limited amount of CSS in the page
• Disadvantages
• Hard to manage for large, complex pages
• Cannot reuse across multiple pages
Property of Penn Engineering, Chris Murphy SD4x-1
221
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
Property of Penn Engineering, Chris Murphy SD4x-1
222
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
<head>
...
<link rel="stylesheet"
type="text/css"
href="[Link]" />
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1
223
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
<head>
...
<link rel="stylesheet"
type="text/css"
href="[Link]" />
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1
224
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
<head>
...
<link rel="stylesheet"
type="text/css"
href="[Link]" />
...
</head>
...
<h1>
Here are some memorable
quotes from movies!
</h1>
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1
225
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
<head> h1 {
... color: red;
<link rel="stylesheet" text-transform: capitalize;
type="text/css"
href="[Link]" /> }
...
</head> [Link]
...
<h1>
Here are some memorable
quotes from movies!
</h1>
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1
226
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
<head> h1 {
... color: red;
<link rel="stylesheet" text-transform: capitalize;
type="text/css"
href="[Link]" /> }
...
</head> [Link]
...
<h1>
Here are some memorable
quotes from movies!
</h1>
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1
227
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
<head> h1 {
... color: red;
<link rel="stylesheet" text-transform: capitalize;
type="text/css"
href="[Link]" /> }
...
</head> [Link]
...
<h1>
Here are some memorable
quotes from movies!
</h1>
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1
228
External CSS
• Include CSS in a separate file and link the file in the
head of the HTML file
<head> h1 {
... color: red;
<link rel="stylesheet" text-transform: capitalize;
type="text/css"
href="[Link]" /> }
...
</head> [Link]
...
<h1>
Here are some memorable
quotes from movies!
</h1>
[Link]
Property of Penn Engineering, Chris Murphy SD4x-1
229
Analysis: External CSS
• Advantages
• Separates content and presentation
• Can include many different CSS pages with multiple
<link> tags
Property of Penn Engineering, Chris Murphy SD4x-1
230
Analysis: External CSS
• Advantages
• Separates content and presentation
• Can include many different CSS pages with multiple
<link> tags
• Disadvantages
• Lots of different files to manage (which might be
overkill for smaller pages)
Property of Penn Engineering, Chris Murphy SD4x-1
231
CSS Selectors
Type of What’s in the CSS File? What does this What does the HTML file
Selector selector apply to? contain?
Element h1 { color:red; } All <h1> elements <h1> ... </h1>
Selector
Property of Penn Engineering, Chris Murphy SD4x-1
232
CSS Selectors
Type of What’s in the CSS File? What does this What does the HTML file
Selector selector apply to? contain?
Element h1 { color:red; } All <h1> elements <h1> ... </h1>
Selector
Class .address { ... } All elements in class <div class=“address”>
selector “address” ...
</div>
Property of Penn Engineering, Chris Murphy SD4x-1
233
CSS Selectors
Type of What’s in the CSS File? What does this What does the HTML file
Selector selector apply to? contain?
Element h1 { color:red; } All <h1> elements <h1> ... </h1>
Selector
Class .address { ... } All elements in class <div class=“address”>
selector “address” ...
</div>
Id Selector #section1 { ... } Unique element with ID <p id=“section1”>
“section1” ...
</p>
Property of Penn Engineering, Chris Murphy SD4x-1
234
Summary
• Cascading Style Sheets (CSS) are a formatting
language used to describe the appearance of content
in an HTML file
• We can include CSS formatting in HTML in three
ways:
1. inline as style attributes
2. internal using the <style> tag
3. external in a separate file linked with the <link> tag
• A CSS element consists of a selector and
property:value pairs
Property of Penn Engineering, Chris Murphy SD4x-1
235
Video 1.7
Chris Murphy
Property of Penn Engineering, Chris Murphy SD4x-1 236
Review
• HTML allows us to specify the structure of
Web content
• CSS is a formatting language used to describe
the appearance of content in an HTML file
Property of Penn Engineering, Chris Murphy SD4x-1
237
Lists in HTML: <ol> and <ul>
• Lists can either be ordered or unordered
Property of Penn Engineering, Chris Murphy SD4x-1 238
Lists in HTML: <ol> and <ul>
• Lists can either be ordered or unordered
Ordered List: <ol>
1. January
2. February
3. March
Property of Penn Engineering, Chris Murphy SD4x-1 239
Lists in HTML: <ol> and <ul>
• Lists can either be ordered or unordered
Ordered List: <ol>
1. January
2. February
3. March
<ol>
<li> January </li>
<li> February </li>
<li> March </li>
</ol>
Property of Penn Engineering, Chris Murphy SD4x-1 240
Lists in HTML: <ol> and <ul>
• Lists can either be ordered or unordered
Ordered List: <ol> Unordered List: <ul>
1. January • Eliana
2. February • Chris
3. March • Swapneel
<ol>
<li> January </li>
<li> February </li>
<li> March </li>
</ol>
Property of Penn Engineering, Chris Murphy SD4x-1 241
Lists in HTML: <ol> and <ul>
• Lists can either be ordered or unordered
Ordered List: <ol> Unordered List: <ul>
1. January • Eliana
2. February • Chris
3. March • Swapneel
<ol> <ul>
<li> January </li> <li> Eliana </li>
<li> February </li> <li> Chris </li>
<li> March </li> <li> Swapneel </li>
</ol> </ul>
Property of Penn Engineering, Chris Murphy SD4x-1 242
Lists in HTML: <ol> and <ul>
• Lists can either be ordered or unordered
Ordered List: <ol> Unordered List: <ul>
1. January • Eliana
2. February • Chris
3. March • Swapneel
<ol> <ul>
<li> January </li> <li> Eliana </li>
<li> February </li> <li> Chris </li>
<li> March </li> <li> Swapneel </li>
</ol> </ul>
• In both cases, use <li> tag to represent List Items
Property of Penn Engineering, Chris Murphy SD4x-1 243
Unordered Lists - Style
• Use CSS style properties to determine the style of
bullet point used within the list as follows (inline
example)
Property of Penn Engineering, Chris Murphy SD4x-1 244
Unordered Lists - Style
• Use CSS style properties to determine the style of
bullet point used within the list as follows (inline
example)
<ul style=“list-style-type:circle”>
<li> Eliana </li>
<li> Chris </li>
<li> Swapneel </li>
</ul>
Property of Penn Engineering, Chris Murphy SD4x-1 245
Unordered Lists - Style
• Use CSS style properties to determine the style of
bullet point used within the list as follows (inline
example)
Unordered List
<ul style=“list-style-type:circle”>
<li> Eliana </li> o Eliana
<li> Chris </li> o Chris
<li> Swapneel </li> o Swapneel
</ul>
Property of Penn Engineering, Chris Murphy SD4x-1 246
Unordered Lists - Style
• Use CSS style properties to determine the style of
bullet point used within the list as follows (inline
example)
Unordered List
<ul style=“list-style-type:circle”>
<li> Eliana </li> o Eliana
<li> Chris </li> o Chris
<li> Swapneel </li> o Swapneel
</ul>
list-style-type:value Bullet View
disc • Disc is the default value
circle o This is the circle view
square § This is the square view
none No bullets, just list items
Property of Penn Engineering, Chris Murphy SD4x-1 247
Ordered Lists - Style
• Use the type attribute of <ol> tag to select
numbering of each item
Property of Penn Engineering, Chris Murphy SD4x-1 248
Ordered Lists - Style
• Use the type attribute of <ol> tag to select
numbering of each item
<ol type=“A” >
<li> January</li>
<li> February</li>
<li> March</li>
</ol>
Property of Penn Engineering, Chris Murphy SD4x-1 249
Ordered Lists - Style
• Use the type attribute of <ol> tag to select
numbering of each item
<ol type=“A” >
<li> January</li>
<li> February</li>
<li> March</li>
</ol>
Ordered List
A. January
B. February
C. March
Property of Penn Engineering, Chris Murphy SD4x-1 250
Ordered Lists - Style
• Use the type attribute of <ol> tag to select
numbering of each item
<ol type=“A” > type View
<li> January</li> type=“1” 1. This is the default setting
<li> February</li> 2. for ordered lists
<li> March</li> type=“A” A. Items ordered with
</ol> B. Uppercase letters
type=“a” a. Items ordered with
b. Lowercase letters
Ordered List type=“I” I. Items ordered with
II. Uppercase Roman Numerals
A. January
B. February type=“i” i. Items ordered with
C. March ii. Lowercase Roman Numerals
Property of Penn Engineering, Chris Murphy SD4x-1 251
Nested Lists
• List items can themselves include lists as well to
produce a nested list effect
<ul style=“list-style-type:circle”>
<li> Eliana </li>
<li> Chris </li>
<ol type=“A”>
<li> SD2x </li>
<li> SD4x </li>
</ol>
<li> Swapneel </li>
</ul>
Property of Penn Engineering, Chris Murphy SD4x-1 252
Nested Lists
• List items can themselves include lists as well to
produce a nested list effect
<ul style=“list-style-type:circle”>
<li> Eliana </li>
<li> Chris </li>
<ol type=“A”>
<li> SD2x </li>
<li> SD4x </li>
</ol>
<li> Swapneel </li>
</ul>
Property of Penn Engineering, Chris Murphy SD4x-1 253
Nested Lists
• List items can themselves include lists as well to
produce a nested list effect
<ul style=“list-style-type:circle”>
<li> Eliana </li>
<li> Chris </li>
<ol type=“A”>
<li> SD2x </li>
<li> SD4x </li>
</ol>
<li> Swapneel </li>
</ul>
Property of Penn Engineering, Chris Murphy SD4x-1 254
Nested Lists
• List items can themselves include lists as well to
produce a nested list effect
<ul style=“list-style-type:circle”>
<li> Eliana </li>
o Eliana
<li> Chris </li> o Chris
<ol type=“A”> A. SD2x
<li> SD2x </li> B. SD4x
<li> SD4x </li> o Swapneel
</ol>
<li> Swapneel </li>
</ul>
Property of Penn Engineering, Chris Murphy SD4x-1 255
Property of Penn Engineering, Chris Murphy SD4x-1 256
Forms
• Forms are used to retrieve information from user of a
Web page
• Enclose all form fields within <form> elements
<form>
Full name:<br>
<input type="text" name="fullname" value="Jane Doe">
<br>
Email Address:<br>
<input type="email" name="email"
value="jdoe@[Link]">
<br><br>
<input type="submit" value="Submit">
</form>
Property of Penn Engineering, Chris Murphy SD4x-1 257
Forms: <input type=“value”>
• Use the type attribute of the input tag to provide
more information on what type of data to expect
from the user
• Different types often allow different input formats
that make data entry more convenient for the user
Property of Penn Engineering, Chris Murphy SD4x-1 258
Property of Penn Engineering, Chris Murphy SD4x-1 259
Property of Penn Engineering, Chris Murphy SD4x-1 260
Forms – Text Inputs
<br> Full Name:
<input type="text" name="username">
<br> Email Address:
<input type="email" name="email">
<br> Password:
<input type="password" name="password">
<br> Date of Birth:
<input type="date" name="dob">
Property of Penn Engineering, Chris Murphy SD4x-1 261
Forms – Text Inputs
<br> Full Name:
<input type="text" name="username">
<br> Email Address:
<input type="email" name="email">
<br> Password:
<input type="password" name="password">
<br> Date of Birth:
<input type="date" name="dob">
Property of Penn Engineering, Chris Murphy SD4x-1 262
Forms – Text Inputs
<br> Full Name:
<input type="text" name="username">
<br> Email Address:
<input type="email" name="email">
<br> Password:
<input type="password" name="password">
<br> Date of Birth:
<input type="date" name="dob">
Property of Penn Engineering, Chris Murphy SD4x-1 263
Forms – Text Inputs
<br> Full Name:
<input type="text" name="username">
<br> Email Address:
<input type="email" name="email">
<br> Password:
<input type="password" name="password">
<br> Date of Birth:
<input type="date" name="dob">
Property of Penn Engineering, Chris Murphy SD4x-1 264
Forms – Text Inputs
<br> Full Name:
<input type="text" name="username">
<br> Email Address:
<input type="email" name="email">
<br> Password:
<input type="password" name="password">
<br> Date of Birth:
<input type="date" name="dob">
Property of Penn Engineering, Chris Murphy SD4x-1 265
Property of Penn Engineering, Chris Murphy SD4x-1 266
Forms – Slider/Range Input
<br> Graduation Year:
<input type="range" name="gradYr" min="1950" max="2020">
Property of Penn Engineering, Chris Murphy SD4x-1 267
Forms – Slider/Range Input
<br> Graduation Year:
<input type="range" name="gradYr" min="1950" max="2020">
Property of Penn Engineering, Chris Murphy SD4x-1 268
Property of Penn Engineering, Chris Murphy SD4x-1 269
Forms – Radio Buttons
<br> Gender:
<input type="radio"
name="genderOption"
value="male"> Male
<input type="radio"
name="genderOption"
value="female"> Female
<input type="radio"
name="genderOption"
value="undisclosed"> Undisclosed
Property of Penn Engineering, Chris Murphy SD4x-1 270
Forms – Radio Buttons
<br> Gender:
<input type="radio"
name="genderOption"
value="male"> Male
<input type="radio"
name="genderOption"
value="female"> Female
<input type="radio"
name="genderOption"
value="undisclosed"> Undisclosed
Property of Penn Engineering, Chris Murphy SD4x-1 271
Forms – Radio Buttons
<br> Gender:
<input type="radio"
name="genderOption"
value="male"> Male
<input type="radio"
name="genderOption"
value="female"> Female
<input type="radio"
name="genderOption"
value="undisclosed"> Undisclosed
Property of Penn Engineering, Chris Murphy SD4x-1 272
Forms – Radio Buttons
<br> Gender:
<input type="radio"
name="genderOption"
value="male"> Male
<input type="radio"
name="genderOption"
value="female"> Female
<input type="radio"
name="genderOption"
value="undisclosed"> Undisclosed
Property of Penn Engineering, Chris Murphy SD4x-1 273
Property of Penn Engineering, Chris Murphy SD4x-1 274
Forms – Checkboxes
<br> Race:
<input type="checkbox" name="race" value="afrAmer"> African American
<input type="checkbox" name="race" value="asian"> Asian
<input type="checkbox" name="race" value="white"> White
<input type="checkbox" name="race" value="amIndian"> American Indian
<input type="checkbox" name="race" value="pacIsl"> Pacific Islander
<input type="checkbox" name="race" value="other"> Other
Property of Penn Engineering, Chris Murphy SD4x-1 275
Forms – Checkboxes
<br> Race:
<input type="checkbox" name="race" value="afrAmer"> African American
<input type="checkbox" name="race" value="asian"> Asian
<input type="checkbox" name="race" value="white"> White
<input type="checkbox" name="race" value="amIndian"> American Indian
<input type="checkbox" name="race" value="pacIsl"> Pacific Islander
<input type="checkbox" name="race" value="other"> Other
Property of Penn Engineering, Chris Murphy SD4x-1 276
Forms – Checkboxes
<br> Race:
<input type="checkbox" name="race" value="afrAmer"> African American
<input type="checkbox" name="race" value="asian"> Asian
<input type="checkbox" name="race" value="white"> White
<input type="checkbox" name="race" value="amIndian"> American Indian
<input type="checkbox" name="race" value="pacIsl"> Pacific Islander
<input type="checkbox" name="race" value="other"> Other
Property of Penn Engineering, Chris Murphy SD4x-1 277
Property of Penn Engineering, Chris Murphy SD4x-1 278
Forms – Color Chooser
<br> Favorite Color:
<input type="color" name="favcolor">
Property of Penn Engineering, Chris Murphy SD4x-1 279
Forms – Color Chooser
<br> Favorite Color:
<input type="color" name="favcolor">
Property of Penn Engineering, Chris Murphy SD4x-1 280
Forms – Color Chooser
<br> Favorite Color:
<input type="color" name="favcolor">
Property of Penn Engineering, Chris Murphy SD4x-1 281
Property of Penn Engineering, Chris Murphy SD4x-1 282
Forms – File Uploads
<br> Resume Submission:
<input type="file" name="resume">
Property of Penn Engineering, Chris Murphy SD4x-1 283
Forms – File Uploads
<br> Resume Submission:
<input type="file" name="resume">
Property of Penn Engineering, Chris Murphy SD4x-1 284
Property of Penn Engineering, Chris Murphy SD4x-1 285
Forms – Buttons
<input type="submit" value="Submit">
<input type="reset" value="Reset">
Property of Penn Engineering, Chris Murphy SD4x-1 286
Forms – Buttons
<input type="submit" value="Submit">
<input type="reset" value="Reset">
Property of Penn Engineering, Chris Murphy SD4x-1 287
Forms – Buttons
<input type="submit" value="Submit">
<input type="reset" value="Reset">
Property of Penn Engineering, Chris Murphy SD4x-1 288
Forms: Input Types
Type Form Field Type Form Field
button Clickable button number Number format entry
checkbox Checkbox options password Masked characters for password
entry
color Color picker
radio Radio button options
date Date picker (year, month,
day) range Slider control to enter number
as a range
email Email address field
reset Reset all form values to default
file File select/browse for file
values (button)
uploading
search Text field for searching
hidden Hidden input field
submit Submit button
image Allow image to serve as
submit button tel Phone number input
month Month and year control text Plaintext field
time Time control url Field for URL
Property of Penn Engineering, Chris Murphy SD4x-1 289
Summary
• HTML lists allow us to organize information in
an HTML page and specify the appearance
• HTML forms allow us to accept input from the
user
Property of Penn Engineering, Chris Murphy SD4x-1
290
You might also like
- Web Technologies Overview: Internet & WWWNo ratings yetWeb Technologies Overview: Internet & WWW5 pages
- 4AHMBZ Milius Nell Inventions&TechnologieNo ratings yet4AHMBZ Milius Nell Inventions&Technologie15 pages
- Applications of Isometric Projection For Visualizing Web SitesNo ratings yetApplications of Isometric Projection For Visualizing Web Sites10 pages
- Origin and Overview of Django FrameworkNo ratings yetOrigin and Overview of Django Framework16 pages
- 2 - A History of HTML: Included in This Chapter Is Information OnNo ratings yet2 - A History of HTML: Included in This Chapter Is Information On16 pages
- WHM - Week3 - Lesson - Planrter Rtert Ertert ErtNo ratings yetWHM - Week3 - Lesson - Planrter Rtert Ertert Ert32 pages
- Function Point Analysis Fpa On A Team Planning Website Based On PHP and Mysql 2165 7866 1000237No ratings yetFunction Point Analysis Fpa On A Team Planning Website Based On PHP and Mysql 2165 7866 10002375 pages
- REST and Web Services: in Theory and in Practice: Paul Adamczyk, Patrick H. Smith, Ralph E. Johnson, and Munawar HafizNo ratings yetREST and Web Services: in Theory and in Practice: Paul Adamczyk, Patrick H. Smith, Ralph E. Johnson, and Munawar Hafiz24 pages
- Understanding HTML and the World Wide WebNo ratings yetUnderstanding HTML and the World Wide Web3 pages
- Website for La Mariquita Council DocumentsNo ratings yetWebsite for La Mariquita Council Documents41 pages
- Read Laravel Up Running 3rd Edition by Matt Stauffer 9781098153229 1098153227No ratings yetRead Laravel Up Running 3rd Edition by Matt Stauffer 9781098153229 1098153227206 pages
- Web Services Description Language - Wikipedia, The Free EncyclopediaNo ratings yetWeb Services Description Language - Wikipedia, The Free Encyclopedia6 pages
- Secure High-Performance Web Services with OKWSNo ratings yetSecure High-Performance Web Services with OKWS14 pages
- Understanding the World Wide Web and Web 2.0No ratings yetUnderstanding the World Wide Web and Web 2.024 pages
- Web Technology Overview and ArchitectureNo ratings yetWeb Technology Overview and Architecture29 pages
- Multithreaded Web Crawler ImplementationNo ratings yetMultithreaded Web Crawler Implementation14 pages
- A Generation Lost in The Bazaar - ACM QueueNo ratings yetA Generation Lost in The Bazaar - ACM Queue24 pages
- Multi Tier Application Programming With PHP Practical Guide For Architects and ProgrammersNo ratings yetMulti Tier Application Programming With PHP Practical Guide For Architects and Programmers27 pages
- Exclusive Web Development with Bootstrap 4 and Angular 2 Second Edition Sergey Akopkokhyants Stephen Radford Akopkokhyants Sergey Radford Stephen100% (1)Exclusive Web Development with Bootstrap 4 and Angular 2 Second Edition Sergey Akopkokhyants Stephen Radford Akopkokhyants Sergey Radford Stephen210 pages
- TIVO Poster: Promoting Student InnovationNo ratings yetTIVO Poster: Promoting Student Innovation6 pages
- Understanding Web Servers and TechnologyNo ratings yetUnderstanding Web Servers and Technology10 pages
- Comprehensive Research On Debian Web Servers - From Fundamentals To Advanced Enterprise DeploymentNo ratings yetComprehensive Research On Debian Web Servers - From Fundamentals To Advanced Enterprise Deployment23 pages
- Premium Domain Driven Laravel Learn to Implement Domain Driven Design Using Laravel 1st Edition by Jesse Griffin ISBN 9781484260234 1484260236No ratings yetPremium Domain Driven Laravel Learn to Implement Domain Driven Design Using Laravel 1st Edition by Jesse Griffin ISBN 9781484260234 1484260236174 pages
- BP America Inc. Saves Millions of Dollars With Integrated Planning and SchedulingNo ratings yetBP America Inc. Saves Millions of Dollars With Integrated Planning and Scheduling5 pages
- Web Programming: Introduction to Web ArchitectureNo ratings yetWeb Programming: Introduction to Web Architecture7 pages
- B.Tech Mid Exam: Rehab & Retrofitting CE724PENo ratings yetB.Tech Mid Exam: Rehab & Retrofitting CE724PE3 pages
- RoutledgeHandbooks 9781315119717 Sec4 - 14No ratings yetRoutledgeHandbooks 9781315119717 Sec4 - 1423 pages
- Chemistry If8766 Answer Key Page 101: WWW - DialuptouNo ratings yetChemistry If8766 Answer Key Page 101: WWW - Dialuptou5 pages
- University of British Columbia Examination of Tensions in Online Freelancing PlatformsNo ratings yetUniversity of British Columbia Examination of Tensions in Online Freelancing Platforms28 pages
- Ernakulam to Bangalore Train Ticket DetailsNo ratings yetErnakulam to Bangalore Train Ticket Details2 pages
- Decision Science Expert in Financial CrimeNo ratings yetDecision Science Expert in Financial Crime1 page
- CV Review for Electrical Engineering RolesNo ratings yetCV Review for Electrical Engineering Roles3 pages
- MMPC-008 Information Systems For ManagersNo ratings yetMMPC-008 Information Systems For Managers67 pages
- Two-Dimensional Viewing TransformationsNo ratings yetTwo-Dimensional Viewing Transformations28 pages