Building Web Sites
Web Browser
Web Browser
HTML
Instruction: a paragraph Displays a paragraph
with bold text with bold text
How is a Web Page Served?
Browser [Link]
Address bar HTTP
Give me page Give me the
[Link] /philosophy page
HTTP
/philosophy Rendering of
HTML page /philosophy page
HTTP 1.0 Session
kirk@enterprise:~$ nc [Link] 80
GET / HTTP/1.0
HTTP/1.0 200 OK
ContentType: text/html;charset=utf8
ContentLength: 27114
Connection: close
<!DOCTYPE html>
<html lang="en">
...
HTML
● Hyper Text Markup Language
● A simple text format to create web pages
● Unlike a binary format like .doc
● Use your favorite text editor to create HTML pages
● No need for any special software
Basic Structure
You You See:
Write:
<!DOCTYPE html>
<html>
<head>
<title> My Home Page
</title>
</head>
<body>
<p>About myself.</p>
</body>
</html>
Basic Structure
<!DOCTYPE html> HTML declaration
<html> HTML opening tag
<head> Page header opening tag
<title> My Home Page Page title opening tag
</title> Page title closing tag
</head> Page header closing tag
<body> Body opening tag
<p>About myself.</p> Paragraph (inside body)
</body> Body closing tag
</html> HTML closing tag
Validating Web Pages
● HTML Validator: [Link]
● Checks your HTML page for errors
● Like a compiler checks for errors in your program
● Always write valid HTML pages even if wrong HTML page
“works”.
Paragraph
You You See:
Write:
<p>This is my
first web
Page.</p>
<p>How exciting!</p>
Heading
You You See:
Write:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
Formatting
You You See:
Write:
This is <em>
emphasized </em>
text.
This is <strong>
strong </strong>
text.
This is
<strong><em> strong
and emphasized
</em></strong>
text.
Formatting
You You See:
Write:
<pre>This is pre
formatted text.
</pre>
Link to Another Web Page
You You See:
Write:
<a href="[Link]
Free Software Foundation
</a>
Image
You You See:
Write:
<img src="[Link]"
alt="GNU" />
Audio
You You Get:
Write:
<audio width="320"
height="240"
controls>
<source
src="[Link]"
type="audio/ogg">
</audio>
Video
You You Get:
Write:
<video width="320"
height="240"
controls>
<source
src="[Link]"
type="video/ogg">
</video>
Unordered List
You You See:
Write:
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
Ordered List
You You See:
Write:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Table
You You See:
Write:
<table border="1">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>James</td>
<td>Kirk</td>
</tr>
<tr>
<td>Spock</td>
<td></td>
</tr>
</table>
Comments
You You See:
Write:
<! This is a
comment >
<p> This is a
paragraph </p>
Inspector
Node selection
Node search
Selected Node Path
Node Hierarchy
Selected Node
Node Details
Inspector 3D View
SVG
You You See:
Write:
<svg>
<circle cx=”50”
cy=”50” r=”40”
stroke=”black”
strokewidth=”3”
fill=”red”/>
</svg>
MathML
HTML5 Canvas
WebGL Demo
WebGL Game Demo
Other Interesting HTML Tags
● <sub> for subscript text
● <sup> for superscript text
● <code> for computer code
● <div> for generic block tag
● <span> for generic inline tag
References
● W3C HTML5: [Link]
● The Pocket HTML Tutorial: [Link]
● W3 Schools HTML5 Tutorial: [Link]
● W3C MathML: [Link]
● W3C Audio/Video:
[Link]
● W3C SVG: [Link]
● WebGL: [Link]
