HTML
Charles Severance
[Link]
[Link]
Time Browser Web Server Database Server
D
Apache
O static MySql
Parse
M Reque
files
Parse st
Respons
e PHP php
code
JavaScri
pt
RRC/HTTP SQL
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
<p>You can add a style
meaning
like
<strong>bold</strong> to
some text by enclosing it in
the
<em>appropriate</em>
tag.</p>
The Web is Still Evolving
• Invented in early 1990s
• Became popular in 1994
• Robert Cailliau – co-
founder of the World
Wide Web
[Link]
v=x2GylLq59rI
ttp://[Link]/History/1994/WWW/Journals/CACM/screensnap2_24c.g
HTML has evolved a *lot*
over the years - as
computers and networks
have gotten faster
1996
[Link] 2007
[Link]/
The Good Old Days
<H1>Tacky HTML</H1>
Hi there.
<p><img src=[Link]>
Browsers tolerate a lot of
completely broken HTML.
<UL>
<LI>List one
<LI>List 2
</UL>
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
[Link]
cat herding
Following the Rules
<h1>Tacky HTML</h1>
Hi there. Tags must be
<p><img src="[Link]"> lowercase.
Browsers tolerate a lot of Attributes must be
completely broken HTML.
</p> enclosed in quotes.
<ul> Tags must be
<li>List one</li> closed.
<li>List 2</li>
</ul>
HTML Documents
Structure of an HTML
Document
<!DOCTYPE html>
<html>
<head> Metadata
metadata.... about the
</head> page
<body>
Displayable
Page content....
content of the
</body> page
</html>
Special File Names
• When a URL points to a directory in your web
server, it looks for a file with a special name:
[Link], [Link], [Link], etc.
• While there is a convention, the “default file” is
configurable.
• Usually [Link] or [Link] is a safe bet.
• This only works when viewing through a web server
- when viewing from disk, you must view the file.
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 [Link]
-rw-r--r-- 1 csev staff 883 Dec 18 22:57 [Link]
-rw-r--r-- 1 csev staff 679 Dec 18 22:57 [Link]
-rw-r--r-- 1 csev staff 5909 Dec 18 22:57 [Link]
csev$
<p>You can add a style like
<strong>bold</strong> to
some text by enclosing it in
the <em>appropriate</em>
tag.</p>
Whitespace and
line wrapping
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>
HTML Tag Basics
Start tag End tag
Tags “mark up” the HTML <h1>Hello World</h1>
document. The tags are
read and interpreted by the Attribute
browser but not shown.
<img
A self-closing tag does not
need a corresponding end
src="[Link]" />
tag.
Self-closing tag
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="[Link]">
♠♣♥♦</a></p>
HTML Comments
!-- Ignore this for now :) -->
p style="border-style: none; position:fixed;
ottom: 10px; right: 10px;">Go to the
a href="[Link]">very last page</a>.</p>
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.
<h1>The First Page</h1>
<p>
If you like, you can switch to the
<a
href="[Link]
m">
Second Page</a>. A link is a “hot spot” on the
</p> 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”
<h1>The Second Page</h1>
<p>
If you like, you can switch back
to the
<a href="[Link]">
First Page</a>.
</p>
Absolute Reference
href="[Link] Page</a>
End
Start Where to Clickable tag
tag go if clicked Text
<a href="[Link]">First Page</a>
Relative Reference
Absolute vs. Relative
a href="[Link] Page</
A hypertext references can be a full URL and refer to
some other page anywhere on the Internet.
<a href="[Link]">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).
Images
<p>
Images can be <img src="[Link]"> right in
the middle of text like a character. And we
can even make an image a clickable
<a href="[Link]"><img
src="[Link]"></a> link to another page.
</p>
A List ...
<ul>
<li><p>This pages shows us how
lists work</p></li>
<li><p>We need to encode
<a href="[Link]">certain
characters</a>
to show them in HTML</p></li>
<li><p>We should learn more about
<a href="[Link]">Links</a>
</p></li>
<li><p>We should learn about
<a href="[Link]">Images</a>
</p></li>
</ul>
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>
Explore
Sample
Code
Explore
Sample
Code
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.
Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Continue new Contributors and Translators here
Severance ([Link]) as part of
[Link] 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