the internet & web. objectives the internet & web html – hypertext markup language project...
TRANSCRIPT
The Internet & Web
Objectives
The Internet & WebHTML – Hypertext Markup
LanguageProject portfolio page
Useful web sites
Color http://www.colorjack.com/ http://kuler.adobe.com/#create/fromacolor
Type: http://www.typetester.org/
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.
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.
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
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
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.
Client/Server
Client
WebPage
Server
Internet Protocols
Protocols
• Rules for clients and servers to communicate with each other.
There are number of protocols with specific functions.
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.
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
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.
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
Top-Level Domain Name
A top-level domain (TLD)- the suffix of domain name.
Current generic TLDs:.edu, .com, .org, .net, .mil, .gov
County Code
Two character codes to indicate the geographical location (country) of the web site.
Examples:
• .tv (Tuvalu), .ws (Samoa), .au, .jp, .uk
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.
Uniform Resource Locator
URL Specifies:
• location of the document
• protocol used to retrieve document
• http://www.duq.edu/home.html
Web Standards (W3C Consortium)
W3C – World Wide Web Consortium
• Offer recommendations related to the Web
• Produces specifications/Recommendations that help standardize web technologies
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/
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).
HTML: Background
Web development
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
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
HTML versions
XHTML
HTML 5 Cleaner and clearer standards
What is Html/Xhtml?
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
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
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>
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
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
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>,…
HTML: Tags
Hypertext MarkUp Language - HTML
<html>
</html>
Beginning Tag
Ending Tag
Tags generally come in pairs.
HTML Elements
<header>
<hgroup>
<h1>Interface design</h1>
<h2>Interface patterns</h2>
</hrgoup>
</header>
Beginning Tag
Ending Tag
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
Special characters
<html> </html> = <html> </html>
& = &
¡ = !
© = ©
HTML: Attributes
Attributes or properties have Values
color = “blue”color = “blue”
width = “12”width = “12”
HTML: Attributes
Tags
<img src=“car.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 “ ”
Document Structure
HTML
HTML: Document structure
HTML
HEAD – information about the Web page.
BODY – the actual contents of the Web page
HTML: Document structure
<HTML>
<HEAD></HEAD>
<BODY>
</BODY>
</HTML>
HTML: Document structure
<!doctype html>
<html>
<head><title> </title></head>
<body></body>
</html>
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.
HTML: Document structure
<!doctype html> <html>
<head><title> Hello World, it's our first page!</title></head>
<body><p>Hello, world!</p></body>
</html>
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>
Tags That Should Be in Every HTML Document
<!doctype html> <html>…</ html > <head>…</head> <title>….</title> <body>…</body>
<HTML> Tag
Reminds the browser that the document is a HTML document
<html>….</html>
<HEAD> Tag
Gives the browser information about the document
Comes after the <HTML> tag
<head>….</head>
<TITLE> Tag
Places information in the title bar of the browser’s window, used by search engines optimization (SEO).
<title>….</title>
Comment Tag
Text that shows up in the HTML source code, but does not show up in the browser window
<! - - Comments go here - - >
<BODY> Tag
All the information between the body tags appears in the browser’s window
<body>…</body>
<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>
Visual vs. Structural
Markup
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.
Block boxes and inline boxes
Block boxes and inline boxes—that correspond to the two types of tags—block-level and inline tags.
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>
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 …
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
Structural: Paragraph Tag
<p>…</p> Gives the appearance of paragraphs
<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>
Structural: Heading Levels
Groups information into major points <h1>…</h1> Biggest heading level <h6>…</h6> Smallest heading level
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>
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>
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
Structural: Unordered Lists
<UL> <LI>Apples</LI> <LI>Oranges</LI> <LI>Pears</LI> </UL>
<LI TYPE=round> <LI TYPE=disc> <LI TYPE=square>
Structural: Unordered Lists
•Apples
•Oranges
•Pears
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”>
Structural: Ordered Lists
1. Apples
2. Oranges
3. Pears
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>
<table>
<tr><td>Row 1Col 1</td></tr> <tr><td>Row 2 Col 1</td></tr>
</table>
Row 1 Column 1
Row 2 Column 1
Making Links & Color
Linking to Another Document
Null links
<a href =“#”>This is a NULL link</a>
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.
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.
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.
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.
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)
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)
Color
Hexadecimal value: FF0000Hexadecimal value: FF0000
FF 00 00FF 00 00
Red
GreenBlue
