1 - Beginner's Guide to HTML5 and CSS3 - Writing Your First Code

1 - Beginner's Guide to HTML5 and

CSS3 - Writing Your First Code

Introduction

1. Brief history of HTML and CSS

2. What is HTML and CSS used for? How are HTML and CSS different?

3. What do you need to get started programming? Tools/Editors

4. Basic HTML syntax and structuring a basic HTML document

5. Basic tags: DocType, Head, Title, Body, Headings, Paragraphs

6. How to save and view a webpage

Brief History of HTML and CSS

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

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.

What is HTML and CSS used for? How are HTML and CSS

different?

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.

What do you need to get started programming? Tools/Editors

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

http://notepad-plus-plus.org/

http://download.cnet.com/Notepad/3000-2352_4-10327521.html

https://creative.adobe.com/products/dreamweaver

http://www.microsoft.com/en-us/download/details.aspx?id=36179

http://www.coffeecup.com/free-editor/

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

Basic HTML syntax and structuring a basic HTML document

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.

http://www.htmlgoodies.com/html5/tutorials/five-essential-html5-editors.html

http://www.awwwards.com/10-html-css-online-code-editors-for-web-developers.html

<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"> Creates a drop down box with two options Red and Green

<option>Red</option>

<option selected>Green</option>

</select>

(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>  <pre> “ This is a pre formatted text “ </pre>  <ul> <li>Red</li> <li>Blue</li> </ul>  <ol> <li>Red</li> <li>Blue</li> </ol>  <table border="1"> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table>  <a href=”http://www.codeproject.com/WebServices/ArticleRSS.aspx?cat=1>Link to View CodeProject Latest Articles</a>  <img id="bob" title="CodeProject" src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="Home" style="height:135px;width:250px;border-width:0px;"> </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.

Basic tags: DocType, Head, Title, Body, Headings, Paragraphs

We shall see in brief about basic HTML tags

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

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

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.






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

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.

style – The style attribute is used when you want to apply specific styling to a paragraph.

How to save and view a webpage

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.

Documents

1 - Beginner's Guide to HTML5 and CSS3 - Writing Your First Code