This document summarizes the key differences between static and dynamic web pages. Static web pages are pre-built pages that display the same content for all users, while dynamic pages are built in real-time based on things like user input or time. Some advantages of static pages are that they are quick and cheap to develop, but they lack personalization and interactivity. Dynamic pages allow for more functional, up-to-date websites but are more expensive to develop and host. The document also provides examples of common HTML tags used to structure pages and add formatting.
2. Static Web page
A static web page is a web page that is delivered to the user
exactly as stored, in contrast to dynamic web pages which
are generated by a web application.
Consequently a static web page displays the same
information for all users, from all contexts, subject to
modern capabilities of a web server to negotiate content-type
or language of the document and the server is configured to
do so.
4. Disadvantages
Any personalization or interactivity has to run client-side
(ie. in the browser), which is restricting.
Maintaining large numbers of static pages as files can be
impractical without automated tools.
Requires web development expertise to update site
Site not as useful for the user
Content can get stagnant
5. Dynamic web page
A dynamic web page is a kind of web page that has been
prepared with fresh information (content and/or layout), for
each individual viewing.
It is not static because
-> it changes with the time (e.g. news content),
->the user (e.g. preferences in a login session),
->the user interaction (e.g. web page game),
->the context (e.g. parametric customization)
6. Advantages of dynamic
websites
Much more functional website
Much easier to update
New content brings people back to the site
Can work as a system to allow staff or users to collaborate
7. Disadvantages
Slower / more expensive to develop
Hosting costs a little more
Search engines work by creating indexes of published
HTML web pages that were, initially, "static". With the
advent of dynamic web pages, often created from a private
database, the content is less visible. Unless this content is
duplicated in some way (for example, as a series of extra
static pages on the same site), a search may not find the
information it is looking for. It is unreasonable to expect
generalized web search engines to be able to access complex
database structures, some of which in any case may be secure
8. HTML CONTENTS
THE HTMLTAG
THE HEADTAG
TITLES
THE BODYTAG
HEADERS
PARAGRAPHS
PREFORMATEDTEXT
BOLD FACE AND ITALICS
LIST
CENTER
SPECIAL FEATURES
9. THE HTML TAG
<HTML> TAG:
Tags are contained in < > symbols. In most cases you start
with the beginning tag, put in the word or words that will be
affected by this tag, and at the end of the string of word(s), you
place a closing tag.
HTML tag is usually placed on the first line of your
document. At the end of your document you should close with
the </html> tag.
The <html> tag signals the point where text
should start being interpreted as HTML code.
10. THE HEAD TAG
Just like the header of a memo, the head of an HTML
document contains special information, like its title.The head
of a document is demarcated by <head> and </head>
respectively.
<html>
<head>
<title>My First HTML Document</title>
</head>
11. TITLES
A title tag allows you to specify a Document Title in your
browser window.When people make hotlists, this title is what they
see in their list after they add your document.The format is:
<title>My First HTML Document</title>
Remember, the title usually doesn't appear in the document
itself, but in a title box or bar at the top of the window.
12. THE BODY TAG
Like you might expect, the body tags <body> and </body>
define the beginning and end of the bulk of your document. All
your text, images, and links will be in the body of the document.
The body should start after the head. A typical page
might begin like
<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
13. HEADERS
There are up to six levels of headers that can be used in your
document, h1 through h6. Header 1 is the largest header and they
get progressively smaller through header 6. Below are each of the
six headers and how they usually appear in relation to one another.
<h1>This is a header 1 tag</h1>
This is a header 1 tag
Headers, as you notice, not only vary in size, they are also
bold and have a blank line inserted before and after them.
14. PARAGRAPHS
In HTML, a paragraph tag <p> should be put at the end of every
paragraph of "normal" text (normal being defined as not already having a
tag associated with it).
<p> causes a line break and adds a trailing blank line
<br> causes a line break with no trailing blank line
As a convenience to yourself and others who might have to edit your
HTML documents, it's a very good idea to put two or three blank lines
between paragraphs to facilitate editing.
15. PREFORMATTED TEXT
The preformatted text tag allows you to include text in your
document that normally remains in a fixed-width font and retains the
spaces, lines, and tabs of your source document. In other words, it
leaves your text as it appears initially or just as you typed it in. Most
clients collapse multiple spaces into one space, even tabs are collapsed to
one space. The only way to circumvent this is to use the preformatted
tag.Visually, preformatted text looks like a courier font.
<pre>this is
an example
of a preformatted
text tag</pre>
16. BOLDFACE AND ITALICS
When using these tags, you usually cannot (and
probably should not) have text that is both boldface and
italics; the last tag encountered is usually the tag that is
displayed. For example, if you had a boldface tag followed
immediately by an italic tag, the tagged word would
appear in italics.
17. LISTS
There is an easy way in HTML to have numbered,
unnumbered, and definition lists. In addition, you can nest
lists within lists.
When using lists, you have no control over the amount
of space between the bullet or list number, HTML
automatically does this for you. Neither (as yet) do you have
control over what type of bullet will be used as each
browser is different.
18. UNNUMBERED LISTS
Unnumbered lists are started with the <ul> tag, followed by
the actual list items, which are marked with the <li> tag. The
list is ended with the ending tag </ul>.
For example, here is an unnumbered list with three items:
<ul>
<li> list item 1
<li> list item 2
<li> list item 3
</ul>
19. NUMBERED LISTS
Here is the same list using a numbered list format:
<ol>
<li> list item 1
<li> list item 2
<li> list item 3
</ol>
20. DEFINITION LISTS
Definition lists allow you to indent without
necessarily having to use bullets.
<dl>
<dt> This is a term
<dd> This is a definition
<dd> And yet another definition
<dt> Another term
<dd> Another definition
</dl>
21. NESTED LISTS
Finally, here is a nested list within an unnumbered list (we could
just have easily had a nested list within a numbered list).
<ul>
<li> list item 1<li> nested item 1
<ul><li> nested item 2
<li> nested item 1 </ul>
<li> nested item 2 </ul>
<ul>
<li> list item 2
<ul>
<li> nested item 1
<li> nested item 2
</ul>
<li> list item 3
</ul>
22. CENTER
You can center text, images, and headings with the center
tag:
<center>This is a centered sentence</center>
This is a centered sentence.
The center tag automatically inserts a line break after the
closing center tag.
23. Addresses
The <address> tag normally appears at the end of a
document and is used most frequently to mark information on
contacting the author or institution that has supplied this
information.
<address>
Introduction to HTML / Pat Androget / Pat_Androget@ncsu.edu
</address>
24. COMMENTS
It is possible to include comments in a source HTML
document that do not appear when seen through a browser.This is
most useful for giving warnings and special instructions to future
editors of your document.
Comments take the form:
<!-----This comment will not appear in the browser----->
25. Table tag
The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or
more <tr>, <th>, and <td> elements.
The <tr> element defines a table row, the <th> element
defines a table header, and the <td> element defines a table
cell.