What is HTML?
- HTML is a language for describe web pages.
- HTML is not a programming language it is a mark up language.
- Mark up language is a collection of mark up tags.
- HTML uses mark up tags to describe the web pages.
History and Evolution of HTML
 |
| Tim Berners-Lee |
HTML is based on SGML ( Standard Generalized Markup Language ) which
was designed according to the need at that time .1989 Tim Berners-Lee invents the Web with HTML as its publishing
language at CERN, the European Laboratory for Particle Physics in Geneva,
Switzerland. HTML —which is short for HyperText Markup Language—
is the official language of the World Wide Web and was first conceived in 1990.For a start, hypertext was coming into vogue and being used on
computers.
July 1994, HTML specification
for HTML 2 is released-Dan Connolly and colleagues collected all the HTML tags
that were widely used and collated them into a draft document that defined the
breadth of what Tim Berners-Lee called HTML 2.
1995: HTML is extended with many new tags and HTML 3 is published as an
Internet Draft.
January 1997: HTML 3.2 published.
December 1999: HTML 4 published.
2000 : XHTML is released.( XHTML is less complicated than
SGML, but more powerful than HTML).
2002: XHTML 2 is released.
2009: HTML 5 begins to show up.
HTML is the markup language used to create hypertext documents for the
World Wide Web. The key to understanding how HTML works is to know what it
means to mark up a text.Markup means to insert special codes called tags
into the text. The tags control how the text appears on a Web page. If you pull
down your Browser's View menu and choose Page Source, you'll see how the text
you're reading now got marked up so it would flow well onto this Web page.
Notice all of the codes inside brackets. Those are the HTML codes.
2009: HTML 5 begins to show up.
How HTML Work
HTML is the markup language used to create hypertext documents for the
World Wide Web. The key to understanding how HTML works is to know what it
means to mark up a text.Markup means to insert special codes called tags
into the text. The tags control how the text appears on a Web page. If you pull
down your Browser's View menu and choose Page Source, you'll see how the text
you're reading now got marked up so it would flow well onto this Web page.
Notice all of the codes inside brackets. Those are the HTML codes.
HTML consists of a series of short codes typed into a text-file by the
site author — these are the tags. The text is then saved as a html file, and
viewed through a browser, like Internet Explorer, Netscape Navigator or Mozilla
Firefox. This browser reads the file and translates the text into a visible
form, hopefully rendering the page as the author had intended. Writing your own
HTML entails using tags correctly to create your vision. You can use anything
from a rudimentary text-editor to a powerful graphical editor to create HTML
pages.
Advantages and Disadvantages of HTML
Advantages of HTML:
1. First advantage it is widely
used.
2. Every browser supports HTML
language.
3. Easy to learn and use.
4. It is by default in every
windows so you don't need to purchase extra software.
5. Its plain text so is easy to
edit.
6. Its also fast to download (text is highly compressible).
7. Its now a standard
8. Its supported by most browsers across most if not all platforms.
9. Simple to edit only requires a text editor.
10.Can be easily edited with WYSIWYG editors (no coding required)
11.Can be used to present just about any kind of data.
12.Tags can be used (or used to be able to be used) very loosely (i.e. used to be able to omit end tags etc).
6. Its also fast to download (text is highly compressible).
7. Its now a standard
8. Its supported by most browsers across most if not all platforms.
9. Simple to edit only requires a text editor.
10.Can be easily edited with WYSIWYG editors (no coding required)
11.Can be used to present just about any kind of data.
12.Tags can be used (or used to be able to be used) very loosely (i.e. used to be able to omit end tags etc).
Disadvantages of HTML:
1. It can create only static and plain pages so if we need dynamic pages then HTML
is not useful.
2. Need to write lot of code for making simple webpage.
3. Security features are not good in HTML.
4. If we need to write long code for making a webpage then it produces some complexity.
1. It can create only static and plain pages so if we need dynamic pages then HTML
is not useful.
2. Need to write lot of code for making simple webpage.
3. Security features are not good in HTML.
4. If we need to write long code for making a webpage then it produces some complexity.
5. It is static needs to be
manually updated or needs some scripting support to change it in some way.
6. Isn't rendered correctly in all browsers
7. Isn't really as flexible as other standards or technologies
8. Its not centralized (all pages must be edited individually).
9. Very limited styling capabilities (we're not talking css here!)
10.Its essentially massively outdated (xhtml and xml suite of standards).
11.Different vendors added (mostly Microsoft early on) their own custom tags that aren't widely supported if at all by most browsers (e.g. marquee tag).
12.Tags can be used (or used to be able to be used) very loosely (i.e. used to be able to omit end tags etc.).
<p> And this is the second
paragraph...and so on.</p>
Tables
<CENTER><table BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH="90%" >
<tr>
<td>cell contents</td>
6. Isn't rendered correctly in all browsers
7. Isn't really as flexible as other standards or technologies
8. Its not centralized (all pages must be edited individually).
9. Very limited styling capabilities (we're not talking css here!)
10.Its essentially massively outdated (xhtml and xml suite of standards).
11.Different vendors added (mostly Microsoft early on) their own custom tags that aren't widely supported if at all by most browsers (e.g. marquee tag).
12.Tags can be used (or used to be able to be used) very loosely (i.e. used to be able to omit end tags etc.).
Basic HTML Tag System
<html> This tag signifies this is an html
document.
<head> This tag signifies the beginning of
the header information.
<title>
The Title
goes here - it shows at the top of the browser - but not on your Web
page.</title>
</head> This tag signifies the end of the
header information.
<body>
This tag
signifies the beginning of the html material.
<h1> Your first header or title should
go between these symbols. </h1>
<p> This tag designates a
paragraph.</p>
</body> This tag signifies the end of the
body of the document.
</html> This tag signifies the end of the
html document.
<br> [This tag at the end of a line
signifies a line break.]
<center>Text between these two symbols will be centered on the
page.</center> [For example, if you place these tags before and
after the <H2>,</H2> tags, your heading will be centered.]
<hr>_________________________________________________________________
[The hr symbol placed in between sections of text makes a horizontal divider bar to separate material on your page. The line you see above emulates the line that will appear in your home page if you use the <HR> option.]
[The hr symbol placed in between sections of text makes a horizontal divider bar to separate material on your page. The line you see above emulates the line that will appear in your home page if you use the <HR> option.]
<!-...-> - Author
comments not seen by the browser.
<b> Words between these tags will show as bold
text</b>
<i> Words between these tags will show as italicized text</i>
Link Tag: <a
href="http://www.abc.def/ghi.edu/">Name for the Web document
you want to appear on the Web page </a> [This is how you create a
tag that will allow someone using your Web page to click and be taken to
another Web page or Web site.
Link to a Particular Place in your Document:[This
linking operation requires you use both the link
tag and the target tag.]
Link tag to set up the link to another place:
<a href="#name" > put text here you want to show on the browser </a> |
Target tag to identify the place to which you want to
link:
<a name="put the same name here you put after the # symbol, but 'without' the # symbol "< /a>
<a name="put the same name here you put after the # symbol, but 'without' the # symbol "< /a>
Create
an email link: <address> e-mail me at: <a
href="mailto:Put your email address with extension here">Put
your email name with extension here also</a></address>
Set
Font Size and Color (other than the default settings):
<font size=5 color=red> text</font>
<font size=5 color=red> text</font>
Open a new window to display a linked
site:
<a href="http://home.cox.rr.com/edtech/" target="_blank">Education and Technology Resources</a>
<a href="http://home.cox.rr.com/edtech/" target="_blank">Education and Technology Resources</a>
Tables
<CENTER><table BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH="90%" >
<tr>
<td>cell contents</td>
<td>cell contents</td>
</tr>
</table></CENTER>
[NOTE: This table is centered on the screen. This table has two columns. Each column begins with a <td> tag and ends with a </td> tag.You can also choose "left" or "right" aligned by changing the "CENTER" to "left" or "right" in the <CENTER> beginning and ending tags. This table has a 1 pixel border, a 1 pixel cell spacing, and a 1 pixel cell padding. The width is 90% of the window. You can change the border width to 0 on up. You can also change the cell spacing and cell padding. A table can be as wide as 100% of the screen or designated in pixels (for ex: 650). Just replace the "90%" with a number of pixels. For ex:: "650".]
</tr>
</table></CENTER>
[NOTE: This table is centered on the screen. This table has two columns. Each column begins with a <td> tag and ends with a </td> tag.You can also choose "left" or "right" aligned by changing the "CENTER" to "left" or "right" in the <CENTER> beginning and ending tags. This table has a 1 pixel border, a 1 pixel cell spacing, and a 1 pixel cell padding. The width is 90% of the window. You can change the border width to 0 on up. You can also change the cell spacing and cell padding. A table can be as wide as 100% of the screen or designated in pixels (for ex: 650). Just replace the "90%" with a number of pixels. For ex:: "650".]
Insert Graphics Files:
<img src="picture.jpg" align=left> [Graphics usually have a .jpg or .gif file extension. ]
<img src="picture.jpg" align=left> [Graphics usually have a .jpg or .gif file extension. ]
Other Technologies Working with HTML
XHTML
XHML is HTML expressed using XML.
The old HTML standards will still work in Web browsers, but Web developers can
use the new XHTML standard to write Web pages that can integrate well with
other technologies defined by XML
XSL
First introduced name Cascading
Style Sheets (CSS). The "X" idea was added to HTML, so too can the
idea of extensibility be applied to style sheets. Then introduced Extensible
Stylesheet Language (XSL), it’s a developed version of CSS.
XFORMS
The standards for these forms are
being developed now. XForms will integrate with XHTML as well as XSL.
SVG
Scalable Vector Graphics (SVG) is a language, currently in draft form, for expressing graphics in two-dimensions
SMIL
The ideal behind Synchronized Multimedia Language (SMIL, pronounced "smile") is to allow developers to create multimedia presentations to be delivered over the Web. SMIL gives authors a way to integrate streaming audio, video, text, images, or other media types into a document. SMIL has been specified as a working draft
DOM
The Document Object Model (DOM)
is a standard for representing the structure of a document. Programmers can use
the DOM to add, delete, and change parts of a document. This makes it possible
to write content to be delivered on the Web that can adapt itself to any
browser or platform.
MathML
While HTML in the latter part of
the 20th century was hailed widely as a wonderful way to share information,
mathematicians were shocked to discover that HTML gave no support for the
symbols and formulas that make up a mathematicians' work.
Java
Certainly, the Java programming
language introduced by Sun Microsystems in 1995 has developed into a standard
for interactive content on the Web. Although today's use of Java still seems to
lag behind its potential, Web developers should understand Java as a principal
language for use with Web content. Java is an object-oriented programming
language, not a markup language like XHTML. But java using with HTML &
XHTML.
VRML
The Virtual Reality Modeling Language (VRML) gives Web developers a way to integrate three-dimensional representations of worlds into Web pages. VRML was set as a standard in 1997 and today is used for a wide variety of tasks including scientific visualization, advertising, and entertainment
References
1. http://www.timetoast.com/timelines/history-of-html-5
2. http://www.w3.org/People/Raggett/book4/ch02.html
