Scribd
Upload
70 views31 pages

02 HTML

The document discusses HTML and how it is used to create web pages. It covers HTML tags, structure, links, and the evolution of HTML over time. The document contains many code examples and images to illustrate HTML concepts.

Uploaded by

Jitendra Solanki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
70 views31 pages

02 HTML

The document discusses HTML and how it is used to create web pages. It covers HTML tags, structure, links, and the evolution of HTML over time. The document contains many code examples and images to illustrate HTML concepts.

Uploaded by

Jitendra Solanki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

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 &lt;</p>
<p>Greater than &gt;</p>
<p>Ampersand &amp;</p>
<p>Ampersand inception &amp;amp;</p>
<p>Semicolon just works ;</p>
<p>Money characters: &pound; &euro; &yen;</p>
<p>Math characters: &sum; &forall; &isin;</p>
<p>Arrows: &larr; &uarr; &rarr; &darr;</p>
<p>The special characters can be
in links: <a href="lists.htm">
&spades;&clubs;&hearts;&diams;</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

You might also like