The document provides an overview of how webpages work, including: - HTML (Hypertext Markup Language) is used to structure and present content. It uses tags to annotate text with elements like headings, paragraphs, and links. - CSS (Cascading Style Sheets) is used to describe how HTML elements should be displayed visually. - JavaScript can be used to add interactivity and functionality to webpages, such as form validation, animations, and AJAX requests. - Web servers host websites and serve webpages to users. Domain names are translated to IP addresses by DNS servers.

1. The Web and HTML
Design & Development Course
Tuesday, March 15, 2011

2. How does the Internet work?
Tuesday, March 15, 2011

3. The Internet
Tuesday, March 15, 2011

4. Web server (box)
Tuesday, March 15, 2011

5. IP addresses
74.125.224.83
Tuesday, March 15, 2011

6. DNS (Domain Name Service)
Google.com
Tuesday, March 15, 2011

7. Recap
• Web servers - Computers that serve up
webpages.
• IP (internet protocol) - Addresses of
web servers.
• DNS (domain name service) -
Translates a URL like Google.com to an IP
address.
Tuesday, March 15, 2011

8. How do webpages work?
Tuesday, March 15, 2011

9. HTML
(HyperText Markup Language)
• HyperText - Means the ability to link out.
• Markup - Like annotating–or “marking
up”– a manuscript
Tuesday, March 15, 2011

10. <h1>
This
is
a
headline
</h1>
<p>
This
is
a
paragraph
</p>
<p>
Here
is
some
text
with
a
word
chosen
to
make
it
<strong>
stand
out
</strong>
</p>
Tuesday, March 15, 2011

11. <h1>
This
is
a
headline
</h1>
<p>
This
is
a
paragraph
</p>
<p>
Here
is
some
text
with
a
word
chosen
to
make
it
<strong>
stand
out
</strong>
</p>
Tuesday, March 15, 2011

12. This is a headline
This is a paragraph
Here is some text with a word chosen to
make it stand out
Tuesday, March 15, 2011

13. Other type of markup languages
• XML (Extensible Markup Language) - A
generic form of markup for transferring
data.
• RSS (Really Simple Syndication) - A markup
language for transferring a feed of items,
specifically titles, posts, photos, and content.
Tuesday, March 15, 2011

14. RSS
<item>
<title>Example
entry</title>
<description>Here
is
a
description.</description>
<link>http://www.wikipedia.org/</link>
<guid>unique
ID
per
item</guid>
<pubDate>Mon,
06
Sep
2009
16:45:00
+0000
</pubDate>
</item>
Tuesday, March 15, 2011

15. CSS
Tuesday, March 15, 2011

16. Cascading Style Sheet
• Describes how a webpage should look.
• Identifies content in a webpage by the tags,
or by special identifiers.
• You must link to a CSS document from
your HTML. (or include it in your page)
Tuesday, March 15, 2011

17. Example:
CSS Zen Garden
Tuesday, March 15, 2011

18. JavaScript
Tuesday, March 15, 2011

19. JavaScript
• Programming (scripting) language that adds
functionality to a webpage.
• For example, you can move elements
around, create timers, detect the browser
type, store cookies, and more...
• jQuery, AJAX, sproutcore are all libraries
written in JavaScript.
Tuesday, March 15, 2011

20. RECAP
• HTML: The content
• CSS: The style
• JavaScript: The functionality
(plug-ins: Flash, JavaVM, Silverlight)
Tuesday, March 15, 2011

21. The Semantic Web
semantic web
noun
"Web of data" that enables machines to understand the
semantics, or meaning, of information on the World Wide
Web.
Tuesday, March 15, 2011

22. Other things you
should know
Tuesday, March 15, 2011

23. Dynamic / Static
• Static webpage: A static webpage
doesn’t change. It’s written in HTML, CSS
and JavaScript.
• Dynamic webpage: Where the content
changes depending on the user interaction.
Content updates, such as a blog, gmail, or
news site.
Tuesday, March 15, 2011

24. Client-side vs Server side
• HTML • PHP (WordPress)
• CSS • MySQL
• JavaScript • Django, Ruby, ASP, .NET
Your computer Web server
Tuesday, March 15, 2011

25. PHP (WordPress)
• The PHP code is run on the web server.
• When you request a webpage (visiting the
site) the PHP code will look up the latest
content in the database (MySQL) and write
an HTML page on the fly.
• End-users never see server-side scripting.
• PHP is free.
Tuesday, March 15, 2011

26. Recap
• Static - A webpage that never changes.
• Dynamic - Content is updated regularly.
• Client-side - Code that is run in the
user’s browser, is also visible to the user.
• Server-side - Code that is run on the
server, not visible to the end-user.
• PHP - A free server-side language. (WP)
Tuesday, March 15, 2011

27. Intro to HTML5
Tuesday, March 15, 2011

28. <tags>
• HTML uses tags to identify content.
• Every opening tag must be closed.
• Some tags have additional information
called attributes.
• You can only use certain tags. Learn them!
Tuesday, March 15, 2011

29. Open and close your tags
<title>
Here
is
a
title
</title>
Tuesday, March 15, 2011

30. Some tags self-close
<br
/>
<hr
/>
<img
src=“some
image”
/>
Tuesday, March 15, 2011

31. Nested Tags
<body>
<h1>Here
is
a
headline</h1>
<p>Here
is
a
paragraph</p>
</body>
Tuesday, March 15, 2011

32. Some tags have attributes
<div>Just
a
division
tag</div>
<div
id=“sidebar”>This
is
the
sidebar</div>
<a
href=“http://google.com”>Google</a>
Tuesday, March 15, 2011

33. DOC Type
• First line of code needs to tell the browser
how to interpret the HTML.
• W3C (World Wide Web consortium)
aimed to standardize the web. Didn’t work
so well.
• We will be using HTML5.
Tuesday, March 15, 2011

34. <!DOCTYPE
html>
(no
spaces
before
it)
Tuesday, March 15, 2011

35. Example
Tuesday, March 15, 2011

36. Two Parts to HTML document
• The <head> - Identifies (meta)
information about the webpage. User does
not see this on the webpage.
• The <body> - Is the actual content of the
webpage that the user sees.
Tuesday, March 15, 2011

37. <!DOCTYPE
html>
<head
lang=“en”>
<meta
charset=“utf-­‐8”
/>
<title>Your
Title</title>
<meta
name=“description”
content
=
“”
/>
<meta
name=“author”
content=
“”
/>
<link
rel=“stylesheet”
href=
“css/
style.css”>
</head>
Tuesday, March 15, 2011

38. <body>
<p>Your
content
here</p>
</body>
Tuesday, March 15, 2011

39. paragraph tag
<p>This
is
a
paragraph.
Line
breaks
don’t
matter.</p>
Tuesday, March 15, 2011

40. strong tag
<p>This
an
<strong>important</strong>
word.</p>
Tuesday, March 15, 2011

41. emphasis tag
<p>This
is
a
word
that
should
be
<em>emphasized</em>
.</p>
Tuesday, March 15, 2011

42. anchor tag
<p>Search
<a
href=“http://google.com”>Google</a>.</p>
<a
href=“http://google.com”>
Tuesday, March 15, 2011

43. headline tag
<h1>This
is
the
largest
headline</h1>
<h2>Sub
headline,
not
as
important</h2>
<h3>Even
less
important</h3>
<h4>Maybe
a
section
heading?</h4>
Tuesday, March 15, 2011

44. division tag
<div>This
is
a
section</div>
<div>This
is
another
section</div>
<div
id=“container”>This
is
a
container</div>
Tuesday, March 15, 2011

45. lists: unordered list
<ul>
<li>Bullet
point
item</li>
<li>Bullet
point
item</li>
<li>Bullet
point
item</li>
</ul>
Tuesday, March 15, 2011

46. lists: ordered list
<ol>
<li>List
item
number
1</li>
<li>List
item
number
2</li>
<li>List
item
number
3</li>
</ol>
Tuesday, March 15, 2011

47. images
<img
src=“image.jpg”
width=“450”
height=“450”
alt=“Image
of
a
man
walking”
/>
Tuesday, March 15, 2011

48. New HTML5 Semantic Tags
Tuesday, March 15, 2011

49. header tag
<header>
<h1>This
is
a
headline</h1>
</header>
Tuesday, March 15, 2011

50. hgroup tag
<hgroup>
<h1>This
is
a
headline</h1>
<h2>This
is
a
subhead</h2>
</hgroup>
Tuesday, March 15, 2011

51. article tag
<article>
<h1>This
is
a
headline</h1>
<p>Some
text</p>
</article>
Tuesday, March 15, 2011

52. time tag
<time>March
9,
2011</time>
<time
datetime=“2011-­‐03-­‐09”>...
<time
datetime=“2011-­‐03-­‐09”
pubdate>
Tuesday, March 15, 2011

53. footer tag
<footer>
<p>This
is
information
at
the
bottom.</p>
</footer>
Tuesday, March 15, 2011

54. navigation tag
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Tuesday, March 15, 2011

55. Others
<video>
<audio>
<aside>
<section>
<canvas>
http://www.w3schools.com/html5/html5_reference.asp
Tuesday, March 15, 2011