dynamic html (#1)
DESCRIPTION
Lecture Number 1: HTML BasicsTRANSCRIPT
Introduction
Haider M. Habeeb
The Internet The World Wide Web The Web Browser
The Effect of Browser Wars Dynamic HTML HTML Basics
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
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.
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.
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.
“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)
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.
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.
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.
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
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 start tag, the second tag is
the end tag Start and end tags are also called opening tags and
closing tags
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.
What do you need? Notepad for editing your HTML documents. Browser for displaying your web pages
Ready?
.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.
Simplified Structure of HTML:<html>
<head> <title> . . . . . . . . . . . .</title>
</head><body>…….……..</body>
</html>
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>
HTML Paragraphs HTML paragraphs are defined with the
<p> tag.
Example<p>This is a paragraph.</p><p>This is another paragraph.</p>
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>
