of 28 /28

static dynamic html tags

Embed Size (px)

Text of static dynamic html tags

Page 1: static dynamic html tags


Page 2: static dynamic html tags

Static Web pageA 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.

Page 3: static dynamic html tags

AdvantagesQuick to developCheap to developCheap to host

Page 4: static dynamic html tags

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 siteSite not as useful for the userContent can get stagnant

Page 5: static dynamic html tags

Dynamic web pageA 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)

Page 6: static dynamic html tags

Advantages of dynamic websitesMuch more functional websiteMuch easier to updateNew content brings people back to the siteCan work as a system to allow staff or users to


Page 7: static dynamic html tags

DisadvantagesSlower / more expensive to developHosting 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

Page 8: static dynamic html tags


Page 9: static dynamic html tags


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.

Page 10: static dynamic html tags

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>

Page 11: static dynamic html tags

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

Page 12: static dynamic html tags

THE BODY TAGLike 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>

Page 13: static dynamic html tags

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

Page 14: static dynamic html tags

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

Page 15: static dynamic html tags

PREFORMATTED TEXTThe 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>

Page 16: static dynamic html tags

BOLDFACE AND ITALICSWhen 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.

Page 17: static dynamic html tags

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

Page 18: static dynamic html tags


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>

Page 19: static dynamic html tags


Here is the same list using a numbered list format:

<ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol>

Page 20: static dynamic html tags


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>

Page 21: static dynamic html tags

NESTED LISTSFinally, 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>

Page 22: static dynamic html tags

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

Page 23: static dynamic html tags

AddressesThe <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 / [email protected]</address>

Page 24: static dynamic html tags

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

Page 25: static dynamic html tags

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

Page 26: static dynamic html tags

Table tag<table border="1">

<tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr></table>

Page 27: static dynamic html tags

SPECIAL CHARACTERS&aacute; .... á &acirc; .... â &aelig; .... æ &agrave; .... à &amp; .... & &aring; .... å &atilde; .... ã &auml; .... ä &ccedil; .... ç &eacute; .... é &ecirc; .... ê &egrave; .... è &eth; .... ð &euml; .... ë &gt; .... > &iacute; .... í &icirc; .... î &igrave; .... ì &iuml; .... ï &lt; .... < &ntilde; .... ñ &oacute; .... ó &ocirc; .... ô &ograve; .... ò &oslash; .... ø &otilde; .... õ &ouml; .... ö &quot; .... " &szlig; .... ß &thorn; .... þ &uacute; .... ú &ucirc; .... û &ugrave; .... ù &uuml; .... ü &yacute; .... ý &yuml; .... ÿ

Page 28: static dynamic html tags