2. The Internet
The World Wide Web
The Web Browser
The Ef fect of Browser Wars
Dynamic HTML
HTML Basics
3. Internet:
network of computers that are connected to each
other and are able to transmit and receive data
World Wide Web:
It’s made up of millions of files and documents
residing on different computers across the Internet
Many different devices can access the web:
desktop and laptop computers, personal digital
assistants (PDAs), mobile phones
4. Web Browser
a program intended to visually render web
documents.
whereas some user-agents interpret HTML but
don’t display it.
known as a client, because it is the thing requesting
and receiving service.
5. Browser Wars
Browser s incompatibility.
Problems browser manufacturers created their
own non-standardized.
Web pages look fine on one browser, but not with
other browsers.
W3C standards Internet Explorer 5 and 6,
Netscape 6 and 7, and Firefox. DHTML has become
a much more powerful tool and a standard.
6. DHTML is:
stands for Dynamic HyperText Markup Language.
NOT a Language
NOT a language or a web standard.
a combination of HTML, JavaScript, DOM and CSS.
7. “Dynamic HTML is a term used by some
vendors to describe the combination of HTML,
style sheets and scripts that allows documents
to be animated.”
World Wide Web Consortium (W3C)
8. What we are going to study?
HTML - Hyper Text Markup Language.
CSS - Cascading Style Sheets.
JavaScript - scripting language on the internet.
DOM – Documents Object Model.
9. Static vs. Dynamic HTML
Static HTML:
HTML elements (paragraphs, images, etc.) in a
specific order in the source code.
The browser always showed all elements in this
order.
Positioning and styling was done by tables.
For any changing, we had to rewrite the HTML.
10. Dynamic HTML:
re-organize our pages on the fly: we can take some
elements out of the natural flow of the page, put
them somewhere else and change its position
again.
It calculates the tables and paragraphs and other
things, then displays them in the best possible way,
one by one, from the beginning to the end of the
HTML document.
11. What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a
markup language
A markup language is a set of markup tags
HTML uses markup tags to describe web
pages
12. HTML Tags
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like
<html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the star t tag, the second tag is the
end tag
Start and end tags are also called opening tags and closing
tags
13. HTML Documents
HTML documents describe web pages
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
The purpose of a web browser (Internet
Explorer or Firefox) is to read HTML documents
and display them as web pages.
The browser does not display the HTML tags, but
uses the tags to interpret the content of the page.
14. What do you need?
Notepad for editing your HTML documents.
Browser for displaying your web pages
Ready?
15. .HTM or .HTML File Extension?
When you save an HTML file, you can use either the
.htm or the .html file extension.
With new software it is perfectly safe to use .html.
17. HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Example:
<html>
<head>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
18. HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
19. HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags.
Example:
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
