the internet & web. objectives the internet & web html – hypertext markup language project...
TRANSCRIPT
![Page 1: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/1.jpg)
The Internet & Web
![Page 2: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/2.jpg)
Objectives
The Internet & WebHTML – Hypertext Markup
LanguageProject portfolio page
![Page 3: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/3.jpg)
Useful web sites
Color http://www.colorjack.com/ http://kuler.adobe.com/#create/fromacolor
Type: http://www.typetester.org/
![Page 4: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/4.jpg)
Terms: Intranet & Extranets
Networks -- two or more computers connected together for communication and the exchange of resources.
Intranet: Private network within organization or business to share information.
![Page 5: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/5.jpg)
Terms: Networks
LAN -- Local Area Network
• Typically a network in a single building or group of buildings
MAN -- Metropolitan Area Network
• Local geographical area
WAN -- Wide Area Network
• Public or commercial communications network – wide geographic areas.
![Page 6: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/6.jpg)
The Internet
Internet
• Inter-connected network of computer networks
• Originally limited to:• government,
• research, and
• academic use (scientific papers unlike web today)
• NSFnet
•National Science Foundation
![Page 7: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/7.jpg)
Growth of Internet in the 1990s
1. Removal of ban on commercial activity
2. Creation of Web by Tim Berners-Lee at CERN
• invented internet-based hypermedia initiative for global information sharing.
• wrote one of the first web client and server in 1990 (www.w3.org/People/Berners-Lee/)
3. Creation of Mosaic, web browser at NCSA
![Page 8: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/8.jpg)
Client/Server
Interaction/communication between two computer programs.
Client
• requests a service (file or data) from the server.
Server
• Fulfills request and transmits requested item(s) to client.
![Page 9: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/9.jpg)
Client/Server
Client
WebPage
Server
![Page 10: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/10.jpg)
Internet Protocols
Protocols
• Rules for clients and servers to communicate with each other.
There are number of protocols with specific functions.
![Page 11: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/11.jpg)
Protocols
File Transfer Protocol - FTP: Rules that allow files to be exchanged.
Hypertext Transfer Protocol - HTTP: Rules for exchanging files (text, graphic images, sound, video) on the Web.
![Page 12: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/12.jpg)
Internet Protocol - IP Address
All devices connected to the Internet have an numeric IP address.
Must identify different computers/nodes – like each house has a mailing address.
Addresses consist of a set of four groups of numbers (octets). 165.191.174.61 between 0 and 255.
CNN - 157.166.255.18
![Page 13: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/13.jpg)
How can I Find My IP Address
Windows Command Prompt >ipconfig >getmac (Mac Address)
Vista: Control panel>>Network & Sharing>>View Status Local Area Connection>Details.
Win 7: Control panel>>Network & Internet>> Network & Sharing Center>> Local Area Connection>>Details.
![Page 14: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/14.jpg)
DNS
Domain Name System (domain name) - helps make reading IP address easier.
157.166.255.18 or CNN.com
Two or more parts, e.g. duq.edu, jma.duq.edu
The rightmost label conveys the top-level domain, e.g. edu
![Page 15: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/15.jpg)
Top-Level Domain Name
A top-level domain (TLD)- the suffix of domain name.
Current generic TLDs:.edu, .com, .org, .net, .mil, .gov
![Page 16: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/16.jpg)
County Code
Two character codes to indicate the geographical location (country) of the web site.
Examples:
• .tv (Tuvalu), .ws (Samoa), .au, .jp, .uk
![Page 17: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/17.jpg)
Computer/Server name
Parent folder name
Your User folder name
Pub folder nameClass folder name
Uniform Resource Locator
Name of Web page – file name
URL Address of a resource on the Internet.
![Page 18: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/18.jpg)
Uniform Resource Locator
URL Specifies:
• location of the document
• protocol used to retrieve document
• http://www.duq.edu/home.html
![Page 19: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/19.jpg)
Web Standards (W3C Consortium)
W3C – World Wide Web Consortium
• Offer recommendations related to the Web
• Produces specifications/Recommendations that help standardize web technologies
![Page 20: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/20.jpg)
Accessibility
Web Accessibility Initiative
• Recommendations for developers of user agents to facilitate use of the web by those with special needs.
• WCAG
•Web Content Accessibility Guidelineshttp://www.w3.org/WAI/WCAG20/quickref/
![Page 21: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/21.jpg)
Accessibility
Section 508 of the Rehabilitation Act
• In 1998, Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities (www.section508.gov).
![Page 22: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/22.jpg)
HTML: Background
Web development
![Page 23: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/23.jpg)
What is Html/Xhtml?
HTML 5 is still a draft
HTML (4.01) is subsumed as XHTML 1.0
The Extensible HyperText Markup Language (XHTML) extends HTML - reformulated in XML
![Page 24: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/24.jpg)
What is Html/Xhtml?
XHTML was a cleaner and clearer standard compared to early versions of HTML.
HTML 5 offers new elements for better semantics, structure, drawing, media content, and handling of forms.
• Nav Article Section Aside Footer
![Page 25: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/25.jpg)
HTML versions
XHTML
HTML 5 Cleaner and clearer standards
What is Html/Xhtml?
![Page 26: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/26.jpg)
HTML 5
Emphasizes semantics. Removes some presentational elements. Introduces new elements such as
header, footer, article, sections, nav.
Use elements that best describe your content. Styling is done with CSS
![Page 27: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/27.jpg)
What is Html/Xhtml?
Not case-sensitive
Works without ending tag </P>
Overlapping tags
All lowercase Tags in pairs
<p></p> Tag do not
overlap
HTML 4.01 XHTML 1.0 & HTML 5
![Page 28: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/28.jpg)
HTML/XHTML
HTML: <br> | XHTML: <br />
HTML:
<img src=“FileName.jpg”>
XHTML & HTML5:
<img src=“FileName.jpg” Alt=“Descriptor” />
HTML: <TITLE></title> | XHTML: <title></title>
![Page 29: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/29.jpg)
HTML Elements
HTML markup divides a document into elements (i.e., paragraphs).
<p>This is paragraph one….</p>
<p>This is paragraph one….</p>
ElementElement Content
![Page 30: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/30.jpg)
HTML
Each individual markup code is referred to as an element or tag.
Each type of element has a name.
Each element is introduced by a start tag and terminated by an end tag
![Page 31: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/31.jpg)
HTML
Element's start tag is name enclosed in angle brackets: <p>, <h1>, <div>, …• XHTML names = lower-case letters and numbers
Element's end tag name preceded by a slash, enclosed in angle brackets: </p>, </h1>, </div>,…
![Page 32: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/32.jpg)
HTML: Tags
Hypertext MarkUp Language - HTML
<html>
</html>
Beginning Tag
Ending Tag
Tags generally come in pairs.
![Page 33: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/33.jpg)
HTML Elements
<header>
<hgroup>
<h1>Interface design</h1>
<h2>Interface patterns</h2>
</hrgoup>
</header>
Beginning Tag
Ending Tag
![Page 34: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/34.jpg)
HTML Tags
Empty elements have start and end tags run together: <img />, <hr />,…
Empty elements such as:• <hr /> Horizontal rule
• <br /> Line break
• <img /> Image
![Page 35: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/35.jpg)
Special characters
<html> </html> = <html> </html>
& = &
¡ = !
© = ©
![Page 36: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/36.jpg)
HTML: Attributes
Attributes or properties have Values
color = “blue”color = “blue”
width = “12”width = “12”
![Page 37: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/37.jpg)
HTML: Attributes
Tags
<img src=“car.jpg” />
![Page 38: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/38.jpg)
HTML: Attributes
Attributes
<img src=“car.jpg” width= “45” alt=“Dodge Viper” />
Attribute or PropertiesValue of attribute
Attributes names in lower case
Values assigned with =
Values should be in “ ”
![Page 39: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/39.jpg)
Document Structure
HTML
![Page 40: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/40.jpg)
HTML: Document structure
HTML
HEAD – information about the Web page.
BODY – the actual contents of the Web page
![Page 41: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/41.jpg)
HTML: Document structure
<HTML>
<HEAD></HEAD>
<BODY>
</BODY>
</HTML>
![Page 42: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/42.jpg)
HTML: Document structure
<!doctype html>
<html>
<head><title> </title></head>
<body></body>
</html>
![Page 43: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/43.jpg)
Document Type Definition (DTD)
A DTD – “defines the legal structure, elements, and attributes that are available for use in a document that complies to the DTD."
Definition of what is legal syntax in HTML and what isn't.
![Page 44: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/44.jpg)
HTML: Document structure
<!doctype html> <html>
<head><title> Hello World, it's our first page!</title></head>
<body><p>Hello, world!</p></body>
</html>
![Page 45: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/45.jpg)
HTML 5: Document structure<!doctype html>
<html>
<head><title> Hello World, it's our first page!</title></head>
<body><section><article> <nav></nav> <p>Hello, world!</p></article></section></body>
</html>
![Page 46: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/46.jpg)
Tags That Should Be in Every HTML Document
<!doctype html> <html>…</ html > <head>…</head> <title>….</title> <body>…</body>
![Page 47: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/47.jpg)
<HTML> Tag
Reminds the browser that the document is a HTML document
<html>….</html>
![Page 48: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/48.jpg)
<HEAD> Tag
Gives the browser information about the document
Comes after the <HTML> tag
<head>….</head>
![Page 49: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/49.jpg)
<TITLE> Tag
Places information in the title bar of the browser’s window, used by search engines optimization (SEO).
<title>….</title>
![Page 50: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/50.jpg)
Comment Tag
Text that shows up in the HTML source code, but does not show up in the browser window
<! - - Comments go here - - >
![Page 51: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/51.jpg)
<BODY> Tag
All the information between the body tags appears in the browser’s window
<body>…</body>
![Page 52: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/52.jpg)
<nav> </nav>
<section>
<header><h2>By the Sea></h2></header>
</section>
<section><article><header><h2>This is the title…</h2></header>
</article></section>
<aside><section><header><h3>Categories</h3></header></section>
<section><header><h3>Archives</h3></header></section></aside>
![Page 53: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/53.jpg)
Visual vs. Structural
Markup
![Page 54: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/54.jpg)
Visual vs. Structural
HTML - evolved from original version with tags suitable for marking up scientific papers.
Recent versions emphasize structural markup, but there are visual markup features left over from earlier versions.
![Page 55: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/55.jpg)
Block boxes and inline boxes
Block boxes and inline boxes—that correspond to the two types of tags—block-level and inline tags.
![Page 56: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/56.jpg)
Block boxes and inline boxes
A block-level tag creates a break before and after the element.
<p> <h>,<div>, etc.
Inline tags don’t create a break before or after element.
<span>, <em>, <strong> <cite>, <abbr>,<kbd>
![Page 57: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/57.jpg)
Block boxes and inline boxes
Inline tags don’t create a break before or after element.
<cite>
<cite>”Mapping Temporal Relations of Discussions Software is a powerful tool”(Miller, 2010, p. 45)</cite>, it can be used on …
![Page 58: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/58.jpg)
Structural: Block-Level Elements
p – paragraphs h1, h2,…,h6 – level 1, 2,…,6 headers blockquote – long quotations (not indented
paragraphs) pre – pre-formatted text div – arbitrary division OL, UL, DL - list <table> for tabular data
![Page 59: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/59.jpg)
Structural: Paragraph Tag
<p>…</p> Gives the appearance of paragraphs
![Page 60: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/60.jpg)
<p> In the summer of 2008, I developed Mapping
Temporal Relations of Discussions Software (MTRDS)
as a tool to analyze the temporal aspects of online
course discussions. This Web-based prototype
imports discussion files from a course management
system and diagrams the temporal aspects of
conversations. From the diagrams, one can observe
the general time and date of discussion activity and
individual patterns of interactivity. </p>
<p> I am seeking funds to assist me in further
developing an intelligent online tool that provides
semantic as well as temporal analyses of online
educational conversations. </p>
![Page 61: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/61.jpg)
Structural: Heading Levels
Groups information into major points <h1>…</h1> Biggest heading level <h6>…</h6> Smallest heading level
![Page 62: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/62.jpg)
Structural: Heading Levels
<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>
![Page 63: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/63.jpg)
In the summer of 2009, I developed Mapping Temporal Relations
of Discussions Software (MTRDS) as a tool to analyze the temporal
aspects of online course discussions. This Web-based prototype
imports discussion files from a course management system and
diagrams the temporal aspects of conversations. From the
diagrams, one can observe the general time and date of
discussion activity and individual patterns of interactivity.
I am seeking funds to assist me in further developing an intelligent
online tool that provides semantic as well as temporal analyses of
online educational conversations.
<h1> Introduction</h1>
<h2> Educational Conversations</h2>
![Page 64: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/64.jpg)
ul – unordered list
ol – ordered list
li – list element
dl – definition list
• Use pairs of dt (term) and dd (definition) elements within dl
Structural: HTML Lists
![Page 65: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/65.jpg)
Structural: Unordered Lists
<UL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Pears</LI> </UL>
<LI TYPE=round> <LI TYPE=disc> <LI TYPE=square>
![Page 66: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/66.jpg)
Structural: Unordered Lists
•Apples
•Oranges
•Pears
![Page 67: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/67.jpg)
Structural: Ordered Lists
<OL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Pears</LI> </OL>
<OL TYPE=“A”> <OL TYPE=“a”> <OL TYPE=“I”> <OL TYPE=“i”> <OL TYPE=“1”>
![Page 68: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/68.jpg)
Structural: Ordered Lists
1. Apples
2. Oranges
3. Pears
![Page 69: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/69.jpg)
Table elements contain tr (row) elements containing td (data, i.e. cell) elements
Tables are very commonly used for page layout
Structural: HTML Tables
<table><tr><td>Row 1Col 1</td></tr><tr><td>Row 2 Col 1</td></tr></table>
![Page 70: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/70.jpg)
<table>
<tr><td>Row 1Col 1</td></tr> <tr><td>Row 2 Col 1</td></tr>
</table>
![Page 71: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/71.jpg)
Row 1 Column 1
Row 2 Column 1
![Page 72: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/72.jpg)
Making Links & Color
![Page 73: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/73.jpg)
Linking to Another Document
Null links
<a href =“#”>This is a NULL link</a>
![Page 74: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/74.jpg)
Linking to Another Document
<a href =“document.htm”>Text that acts as the link</a>
This anchor links to a document in the same folder as the current web page.
![Page 75: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/75.jpg)
Linking to a Specific Section of Another Document
<a href=“document.htm#SectionTitle”>Text that acts as the link</a>
<a name=“SectionTitle”> </a>
This anchor links to a specific section of the document.htm page, which is in the same folder and the current web page.
![Page 76: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/76.jpg)
Linking to a Specific Section of Another Document
<a href=“books/document.htm”>Read Books</a>
This anchor links to the document.htm page, which is in a folder titled books.
![Page 77: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/77.jpg)
Linking to a Specific Section of Another Document
<a href=“http://www.cnn.com”>Read Books</a>
This anchor links to an external web site.
![Page 79: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/79.jpg)
Color Equivalent
REDRED FF0000 FF0000 GREEN GREEN 00FF00 00FF00 BLUEBLUE 0000FF 0000FF MAGENTA MAGENTA FF00FF FF00FF CYAN CYAN 00FFFF 00FFFF YELLOW YELLOW FFFF00 FFFF00 BLACKBLACK 000000 000000 WHITE FFFFFFWHITE FFFFFF baker's chocolatebaker's chocolate (5C3317) (5C3317) semi-sweet chocolatesemi-sweet chocolate (6B4226) (6B4226)
![Page 80: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/80.jpg)
Color
Colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).
The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF)
![Page 81: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/81.jpg)
Color
Hexadecimal value: FF0000Hexadecimal value: FF0000
FF 00 00FF 00 00
Red
GreenBlue
![Page 82: The Internet & Web. Objectives The Internet & Web HTML – Hypertext Markup Language Project portfolio page](https://reader030.vdocuments.net/reader030/viewer/2022032606/56649eb65503460f94bbf5d9/html5/thumbnails/82.jpg)