Introduction
In this article we shall see the brief history of HTML and CSS and learn some basics.
Quote: The following HTML History is compiled by referencing
[1]HTML (Hyper Text Markup Language) was originally developed by a man named Tim Berners-Lee a physicist back in early 1989. The first version of HTML 1.0 was initially released as a publishing language.
The first version of the HTML which Tim Berners-Lee created can be found at http://www.w3.org/History/1991-WWW-NeXT/Implementation/HyperText.m. The original version of HTML (HTML 1.0) was very basic and limited with only 22 HTML tags.
HTML 2.0 was released in 1995. It has few more additional features and there was not much difference when compared to HTML 1.0.
The web becoming popular with HTML 3.0. There were enhancements to web and more tags and abilities to web were introduced. HTML 3.0 draft specification was created which included lots of new abilities and opportunities for web developers to create web pages. However the draft was abandoned because the web browsers were slow in implementing new features and abilities. Netscape was the market leader which came up with it own tags worked only for Netscape browser. This is when the proprietary tags started getting introduced.
HTML 3.2 specification later came up by W3C ( World Web Consortium) in 1994. The proprietary tags got removed and the official specification for HTML 3.2 to released in 1997. Several tags were introduced for styling texts and links.
HTML 4.0 came in 1997 and officially became a standard in 1998. Brought up a drastic changes and made a huge step in the evolution of web HTML. The people who were involved in building the specification realized the styling tags which was introduced in HTML 3.2 more likely should not be a part of the HTML specification in turn it should be on it's own language. As a result the styling tags were removed. Also HTML 4.0 came up with new tags for stylesheets, frames, embedded objects etc.
HTML 4.01 was released as a revised version of HTML 4.0. There wasn't a big change however there were few changes or corrections were made. <noframe> tag was introduced for browsers which did not support frames or do not have frames enabled. Also frame tag containing a target attribute was brought up as as correction for the previous HTML 4.0 specification.
Later came the XHTML (eXtensible mark up language) specification which because a standard in Jan 2000 with HTML 4.01. XHTML was not a complete different language from HTML but it was strict, clean and more efficient than previous version of HTML specification. The rules included the semantic codes that one has to follow in defining the XHTML tags. XHTML tags must be closed and properly nested and tags must be in lower case.
History of CSS
Quote: The brief history of css is based on
[2]CSS1 was released by W3C in 1996. The CSS1 included basic styling functions such as font, color, and background images. Most current browsers fully support CSS1.
CSS2 came out in 1998 which added some more features on top of CSS1. CSS2 included features for positioning of elements on the page for page layout, provided support for downloadable fonts, and allowed pages to be formatted for printing. Styles for onscreen and on print was introduced in CSS2.
CSS3 which is still on going and not all the features are supported by browser vendors. Support for animation, text effects , 2D and 3D transformations etc have been introduced.
HTML is a language used for describing the structure of the web page. Using HTML markups one can create a web page. In other words HTML is used to create a web document. Every HTML document contains three main sections the head, title and the body.
The head element <head> includes title <title>, which specifies the title of the web page. Also the head can include tags for script, style , link , meta data etc.
The HTML body may contain scripts, tables, frames, forms, images, comments etc which constitutes the structure of the web document.
CSS (Cascading Style Sheet) is used for styling the web document. It was designed to define the look and feel of the web document. CSS separates the document content from it's presentation. The CSS acts as a presentation layer defines the way how the content should be displayed or rendered unlike like HTML which defines the structure of the document. CSS can also be used for styling the HTML document for various rendering mechanisms like print , screen etc.
Notepad can be used as a basic HTML editor. Here's are the list of professional HTML editors
Notepad ++ is a free open source editor. It's a light weight replacement of windows notepad.
http://notepad-plus-plus.org/
http://download.cnet.com/Notepad/3000-2352_4-10327521.html
Adobe Dreamweaver – Provides trial but it's a paid one.
https://creative.adobe.com/products/dreamweaver
Microsoft Expression Web – Below is the free version
http://www.microsoft.com/en-us/download/details.aspx?id=36179
CoffeeCup HTML Editor – Provides free and full version which is paid.
http://www.coffeecup.com/free-editor/
Free Web Editors for Windows , Mac and Linux
http://webdesign.about.com/od/windowshtmleditors/tp/free-windows-editors.htm
http://webdesign.about.com/od/macintoshhtmleditors/tp/free-macintosh-editors.htm
http://webdesign.about.com/od/htmleditors/tp/Free-HTML-Editors-Linux-UNIX.htm
Essential HTML 5 Editors
1. Sublime Text 2
2. Aloha Editor
3. Dreamweaver CS5
4. Maqetta
5. MacFlux
6. BlueGriffon
http://www.htmlgoodies.com/html5/tutorials/five-essential-html5-editors.html
Online HTML and CSS Editors
http://www.awwwards.com/10-html-css-online-code-editors-for-web-developers.html
First let us see some of the basic tags required to create a simple HTML document.
| Tag | Description |
| <html> | Html tag is used for creating a HTML document. |
| <head> | Head Tag acts as a container for page header information. |
| <title> | Title tag is used to specify the title of the page. |
| <body> | Body tag is used to define the actual contents of the HTML document. |
| <p> | Starts a new paragraph. You should use the </p> tag to end the paragraph, but it isn't necessary. |
| <br> or <br /> | Starts a new line. |
| <b> </b> | Creates a Bold face text. |
| <i> </i> | Creates an Italic face text. |
| <u> </u> | Used for underline text. |
| <pre> </pre> | Text between these tags is "pre formatted". Spaces and line breaks appear as it is entered within pre. |
| <img src="imagefilename" title="text" alt=””> | Used to create an image.
|
| <a href="filename" target="_blank">Click here</a> | Creates a new link. On click of the link, opens up a new window as the target is set to blank.
|
| <ul> </ul> | Creates an un numbered list with each list item as bullet point. |
<ol> </ol>
| Creates a numbered list with each item in the list is numbered. |
<table> </table>
| Creates a table. You can use <tr> to create new row and <td> to create a column with in the table row. |
| <input type="text" name="textboxName"/> | Creates a single line text box.
|
| <input type="checkbox" name="checkboxName"/> | Creates a check box item.
|
| <input type="radio" name="radiobuttonName" value="1"/> | Creates a radio button with its value set to 1 in this case.
|
| <input type="submit" value="label"/> | Creates a submit button. Used to post of submit all the form data to server. |
| <textarea rows="4" cols="40" name="parameter" /> | Creates a text area (a multiline text box) with 4 rows height and 40 column wide.
|
| <input type="hidden" name="parameter" value="1"/> | Creates a hidden input with the value set to the hidden value = 1 in this case.
|
| <select name="parameter">
<option>Red</option>
<option selected>Green</option>
</select>
| Creates a drop down box with two options Red and Green
(Selected)
|
Here's the simple HTML document at high level contains basic HTML tags.
<html>
<head>
<title> HTML document structure </title>
<meta name="Keywords" content="Free source code, tutorials, html, css" />
<meta name="application-name" content="HTML sample" />
</head>
<body>
<h1>Heading</h1>
<p>A paragraph</p>
<!--Creates a pre formatted text-->
<pre> " This is a pre formatted text " </pre>
<!--Creates a unordered List-->
<ul>
<li>Red</li>
<li>Blue</li>
</ul>
<!--Creates a ordered List-->
<ol>
<li>Red</li>
<li>Blue</li>
</ol>
<!--Creates a table-->
<table border="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
<!--Creates a link to an external page-->
<a href="http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=1>Link to View CodeProject Latest Articles</a>
<!--Creates CodeProject Bob-->
<img id="bob" title="CodeProject" src="http:
</body>
</html>
Here's how the HTML Page will look like when it gets rendered in browser.
The HTML document can be considered as a document tree with the root node as <html>. The head and body as it's branches. Below is the sample document.
(Courtesy: Image referenced from - http://reference.sitepoint.com/html/page-structure)
We shall see in brief about basic HTML tags. The following HTML tags are inspired from [3]
DocType tag:
The DocType (DTD) declaration should be the first item in the web document. The browser will render the contents in HTML as per the DTD which is being set in the document. Also the browser identifies the version of the markup based on the DTD defined in the document.
The DocType declaration is as below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The PUBLIC in a DTD informs the browser that the DTD is a publicly available resource.
Note the doc type for HTML5 has been improved and it's quite simple and easy to define.
<!DOCTYPE html>
The browser rendering is purely depending upon the DTD defined in the web document.
Head tag
The head element describes document with it's related resources such as scripts and style sheets used.
The head contains title element which represents the document title. You can see the document title appearing in the browsers title bar. In addition to title , the head can also have the following things.
<html>
<head>
<title>HTML basic tutorials</title>
</head>
</html>
base
The base defines base URLs for links or resources on the page, and target windows in which to open linked content. You can use base for setting the base URL once in heading and you can make use of this base URL for all the links with in the document.
Here's an example. You can notice below the image tag does not need to have the complete path to the image.
<head>
<title>Code Project</title>
<base href="http://www.codeproject.com/" />
</head>
<body>
<img src="/images/one.gif" />
</body>
link
The link refers to a resource of some kind, most often to a style sheet that provides instructions about how to style the various elements on the web page.
<link href="/css/main.min.css" rel="stylesheet" type="text/css">
meta
The meta data provides additional information about the page. For example, which character encoding the page use, a summary of the page’s content etc.
Meta data in a HTML is mainly used by search engines. It lets the search engine to know about what page or site is all about. Example of a meta data is as below.
<meta name="description" content="HTML5 basics">
<meta name="keywords" content="HTML, introduction, basics, head, body, course, class, tutorial, beginners, guide, beginner, beginners, programming, program, learn, beginner, html, page, webpage, website, guide">
object
The object represents a multipurpose container used to embedd media objects like audio, video, Pdf , flash etc.
Example: <object width="500" height="500" data="htmlTutotial.swf"></object>
script
The script tags are used either to embed or refer to an external script. Example of script usage is as below.
<script type="text/javascript" src="/js/jquery.js" async="async"></script>
<script type="text/javascript" src="/js/script.js" async="async"></script>
style
The style tags provides an area for defining the page specific CSS styles. Below is an example of an inline style which gets applied when the page gets rendered in browser.
<html>
<head>
<style>
h1 {color:orange;}
p {color:red;}
</style>
</head>
<body>
<h1>A Heading tag</h1>
<p>A paragraph tag</p>
</body>
</html>
Body tag
Quote: The below definition is referenced from
[4]The body tag in an HTML acts as a container for the renderable contents of the document.
Here in body you will see most of the HTML tags like images, paragraphs, hyperlinks, tables, div, span etc elements.
Example
<html>
<head>
<title>Html basic tutorials</title>
</head>
<body>
<p> The Web Page content goes here </p>
</body>
</html>
Heading tag
Quote: The below one referenced from
[5]The HTML tags <h1> to <h6> are used to define HTML headings. The h1 tag is mainly used as main headings.
<h1> tag creates 24 point type heading.
<h2> tag creates 18 point type heading.
<h3> tag creates 14 point type heading.
<h4> tag creates 12 point type heading.
<h5> tag creates 10 point type heading.
<h6> tag creates 8 point type heading.
Example:
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
Paragraph tag
Quote: The below definition is referenced from [6]
The paragraphs are defined with <p> tag.
There's a small difference in the paragraph tag usage in HTML 4 or 5 and XHTML. The end tag is not required for HTML 4 or 5 where as for XHTML it is required.
Example:
<p>This is a paragraph of text</p>
Attributes of paragraph tag
id – An id attribute has to be unique to the page. An id can also be used in the css style sheets to set a specific formatting to the paragraphs.
class – The class attribute is used to apply styling to the paragraph.
lang – The lang attribute defines the language used in the paragraph.
Quote:
The below definition is referenced from [7]style – The style attribute is used when you want to apply specific styling to a paragraph.
The HTML page must be saved with *.html. Say if you are making use of notepad to build a simple HTML document to save the document just select File → Save and then select “All files” and then you can specify the file name ex: “htmltutorial.html”
In order to view the HTML page just double click on the html file that was saved. It should openup in a web browser.
If you want to have a real experience in understanding and viewing the HTML web page, you can download the samples from this article and view them in browser.
References
[1] http://www.landofcode.com/html-tutorials/html-history.php
[2] http://www.cssneuse.net/the-history-of-css.php
[3] http://reference.sitepoint.com/html
[4] http://www.htmlquick.com/reference/tags/body.html
[5] http://www.w3schools.com/tags/tag_hn.asp
[6] http://www.w3schools.com/tags/tag_p.asp
[7] http://www.htmlbasictutor.ca/paragraph-tag.htm
Points of Interest
While working on this article , many things I got refreshed and learnt a lot :). Thanks for CodeProject in coming up with this article contest by that way we all can learn and contribute to the community. I really enjoyed every bit of writing this article.
History
Version 1.0 - Part 1 of HTML5 and CSS3 Series of articles - 03/29/2014
Version 1.1 - Adding article references - 08/12/2015
