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.
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
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
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
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
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
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
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
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
