WEB APPLICATIONS
HTML FOR EVERYBODY
HTML
Charles Severance
www.wa4e.com
https://www.wa4e.com/code/html.zip
WEB APPLICATIONS
HTML FOR EVERYBODY
Time Browser Web Server Database Server
D
Apache MySql
O static
Parse
M Request
files
Parse
Response
PHP php
code
JavaScript
RRC/HTTP SQL
WEB APPLICATIONS
HTML FOR EVERYBODY
HTML
• A way of marking up text to indicate that some text is
different than other text
• We “tag” portions of the text to communicate meaning
<p>You can add a style like
<strong>bold</strong> to some
text by enclosing it in the
<em>appropriate</em> tag.</p>
WEB APPLICATIONS
HTML FOR EVERYBODY
The Web is Still Evolving
• Invented in early 1990s
• Became popular in 1994
• Robert Cailliau – co-founder
of the World Wide Web
https://www.youtube.com/watch?v=x2GylLq59rI
WEB APPLICATIONS
HTML FOR EVERYBODY
http://www.w3.org/History/1994/WWW/Journals/CACM/screensnap2_24c.gif
WEB APPLICATIONS
HTML FOR EVERYBODY
HTML has evolved a *lot* over
the years - as computers and
networks have gotten faster
1996
2007
http://replay.waybackmachine.org/19961022175643/http://www10.yahoo.com/
WEB APPLICATIONS
HTML FOR EVERYBODY
The Good Old Days
<H1>Tacky HTML</H1>
Hi there.
<p><img src=tiny.png>
Browsers tolerate a lot of
completely broken HTML.
<UL>
<LI>List one
<LI>List 2
</UL>
WEB APPLICATIONS
HTML FOR EVERYBODY
World Wide Web Consortium
• Formed by Tim Berners-Lee of
MIT (formerly of CERN)
• Founded to develop standards
around HTML, CSS, XML, etc.
• Insure that the web was based
on open standards rather than
proprietary vendor products -
a bit like cat herding http://www.w3.org/Consortium/facts
WEB APPLICATIONS
HTML FOR EVERYBODY
Following the Rules
<h1>Tacky HTML</h1>
Hi there.
<p><img src="tiny.png"> Tags must be lowercase.
Browsers tolerate a lot of Attributes must be
completely broken HTML.
</p> enclosed in quotes.
<ul> Tags must be closed.
<li>List one</li>
<li>List 2</li>
</ul>
WEB APPLICATIONS
HTML FOR EVERYBODY
HTML Tags
WEB APPLICATIONS
HTML FOR EVERYBODY
Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
metadata.... Metadata about
</head> the page
<body>
Page content.... Displayable content
</body> of the page
</html>
WEB APPLICATIONS
HTML FOR EVERYBODY
Special File Names
• When a URL points to a directory in your web server, it looks
for a file with a special name:
index.html, index.htm, index.php, etc.
• While there is a convention, the “default file” is configurable.
• Usually index.htm or index.html is a safe bet.
• This only works when viewing through a web server - when
viewing from disk, you must view the file.
WEB APPLICATIONS
HTML FOR EVERYBODY
Multiple Files
We can put multiple files in the same directory and then use
them in relative links.
csev$ ls -l
-rw-r--r-- 1 csev staff 618 Dec 18 22:56 index.htm
-rw-r--r-- 1 csev staff 883 Dec 18 22:57 images.htm
-rw-r--r-- 1 csev staff 679 Dec 18 22:57 tables.htm
-rw-r--r-- 1 csev staff 5909 Dec 18 22:57 tiny.png
csev$
WEB APPLICATIONS
HTML FOR EVERYBODY
<p>You can add a style like
<strong>bold</strong> to some
text by enclosing it in the Whitespace and
<em>appropriate</em> tag.</p> line wrapping
WEB APPLICATIONS
HTML FOR EVERYBODY
Tags Have a Beginning and /End...
<p>You can add a style like
<strong>bold</strong> to some
text by enclosing it in the
<em>appropriate</em> tag.</p>
WEB APPLICATIONS
HTML FOR EVERYBODY
HTML Tag Basics
Start tag End tag
<h1>Hello World</h1>
Tags “mark up” the HTML
document. The tags are read and Attribute
interpreted by the browser but
not shown. <img src="x.png" />
A self-closing tag does not need a
corresponding end tag. Self-closing tag
WEB APPLICATIONS
HTML FOR EVERYBODY
What about < s ?
<p>Less than <</p>
<p>Greater than ></p>
<p>Ampersand &</p>
<p>Ampersand inception &amp;</p>
<p>Semicolon just works ;</p>
<p>Money characters: £ € ¥</p>
<p>Math characters: ∑ ∀ ∈</p>
<p>Arrows: ← ↑ → ↓</p>
<p>The special characters can be
in links: <a href="lists.htm">
♠♣♥♦</a></p>
WEB APPLICATIONS
HTML FOR EVERYBODY
HTML Comments
<!-- Ignore this for now :) -->
<p style="border-style: none; position:fixed;
bottom: 10px; right: 10px;">Go to the
<a href="navdetail.htm">very last page</a>.</p>
WEB APPLICATIONS
HTML FOR EVERYBODY
Links and more links…
WEB APPLICATIONS
HTML FOR EVERYBODY
HTML Links
• One of the key things about HTML is making a set of pages
and creating “hypertext” links amongst those pages.
• Links are what make the “web” into a web of interlinked
documents.
• The interlinked nature of the web leads to the “intelligence”
that search engines like Google appear to have.
WEB APPLICATIONS
HTML FOR EVERYBODY
<h1>The First Page</h1>
<p>
If you like, you can switch to the
<a href="http://www.dr-chuck.com/page2.htm">
Second Page</a>.
</p>
A link is a “hot spot” on the page.
It can be text or an image. Often it
is visually marked to make it easier
to “notice” so as to encourage
users to click!
“a” is short for “anchor” and
“href” is short for “hypertext
reference”
WEB APPLICATIONS
HTML FOR EVERYBODY
<h1>The Second Page</h1>
<p>
If you like, you can switch back to the
<a href="page1.htm">
First Page</a>.
</p>
WEB APPLICATIONS
HTML FOR EVERYBODY
Absolute Reference
<a href="http://www.dr-chuck.com/page2.htm">Second Page</a>
End
Start Where to Clickable tag
tag go if clicked Text
<a href="page1.htm">First Page</a>
Relative Reference
WEB APPLICATIONS
HTML FOR EVERYBODY
Absolute vs. Relative
<a href="http://www.dr-chuck.com/page2.htm">Second Page</a>
A hypertext references can be a full URL and refer to some other
page anywhere on the Internet.
<a href="page1.htm">First Page</a>
Or the reference can be a file name that is assumed to be in the
same folder as the current document (relative reference).
WEB APPLICATIONS
HTML FOR EVERYBODY
Images
<p>
Images can be <img src="tiny.png"> right in
the middle of text like a character. And we
can even make an image a clickable
<a href="lists.htm"><img src="tiny.png"></a>
link to another page.
</p>
WEB APPLICATIONS
HTML FOR EVERYBODY
A List ...
<ul>
<li><p>This pages shows us how
lists work</p></li>
<li><p>We need to encode
<a href="special.htm">certain
characters</a>
to show them in HTML</p></li>
<li><p>We should learn more about
<a href="links.htm">Links</a>
</p></li>
<li><p>We should learn about
<a href="images.htm">Images</a>
</p></li>
</ul>
WEB APPLICATIONS
HTML FOR EVERYBODY
Tables
<table>
<tr>
<th>Make</th>
<th>Model</th>
<th>Mileage</th>
</tr>
<tr>
<td>Ford</td><td>Edge</td>
<td>10348</td>
</tr>
<tr>
<td>Pontiac</td><td>Vibe</td><td>73630</td>
</tr>
</table>
WEB APPLICATIONS
HTML FOR EVERYBODY
Explore
Sample
Code
WEB APPLICATIONS
HTML FOR EVERYBODY
Explore
Sample
Code
WEB APPLICATIONS
HTML FOR EVERYBODY
Summary
• HTML has gone through many changes and evolutions.
It started clean and simple - then got ugly and nasty - now
we are back to a clean and simple approach.
• A key to modern/clean HTML is that formatting is handled
using CSS - Cascading Style Sheets.
WEB APPLICATIONS
HTML FOR EVERYBODY
Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Severance (www.dr- Continue new Contributors and Translators here
chuck.com) as part of www.wa4e.com and made available under a
Creative Commons Attribution 4.0 License. Please maintain this
last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel
free to add your name and organization to the list of contributors
on this page as you republish the materials.
Initial Development: Charles Severance, University of Michigan
School of Information
Insert new Contributors and Translators here including names and
dates
