Click here to Skip to main content
15,861,168 members
Articles / Web Development / HTML

Beginner's Guide to HTML5 and CSS3 - Writing Your First Code (Series 1 of 12)

Rate me:
Please Sign up or sign in to vote.
4.79/5 (55 votes)
13 Aug 2015CPOL11 min read 75K   982   91   20
Learn HTML5 and CSS3 from basics to advanced level in several parts.

Introduction

In this article we shall see the brief history of HTML and CSS and learn some basics.

 

Brief History of HTML and CSS

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.

 

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


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.
<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://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.

Image 1

Image 2

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.

Image 3

(Courtesy: Image referenced from - http://reference.sitepoint.com/html/page-structure)

 

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

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>

Image 4

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.

 

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.

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
Profile

Around 10 years of professional software development experience in analysis, design, development, testing and implementation of enterprise web applications for healthcare domain with good exposure to object-oriented design, software architectures, design patterns, test-driven development and agile practices.

In Brief

Analyse and create High Level , Detailed Design documents.
Use UML Modelling and create Use Cases , Class Diagram , Component Model , Deployment Diagram, Sequence Diagram in HLD.

Area of Working : Dedicated to Microsoft .NET Technologies
Experience with : C# , J2EE , J2ME, Windows Phone 8, Windows Store App
Proficient in: C# , XML , XHTML, XML, HTML5, Javascript, Jquery, CSS, SQL, LINQ, EF

Software Development

Database: Microsoft SQL Server, FoxPro
Development Frameworks: Microsoft .NET 1.1, 2.0, 3.5, 4.5
UI: Windows Forms, Windows Presentation Foundation, ASP.NET Web Forms and ASP.NET MVC3, MVC4
Coding: WinForm , Web Development, Windows Phone, WinRT Programming, WCF, WebAPI

Healthcare Domain Experience

CCD, CCR, QRDA, HIE, HL7 V3, Healthcare Interoperability

Education

B.E (Computer Science)

CodeProject Contest So Far:

1. Windows Azure Developer Contest - HealthReunion - A Windows Azure based healthcare product , link - http://www.codeproject.com/Articles/582535/HealthReunion-A-Windows-Azure-based-healthcare-pro

2. DnB Developer Contest - DNB Business Lookup and Analytics , link - http://www.codeproject.com/Articles/618344/DNB-Business-Lookup-and-Analytics

3. Intel Ultrabook Contest - Journey from development, code signing to publishing my App to Intel AppUp , link - http://www.codeproject.com/Articles/517482/Journey-from-development-code-signing-to-publishin

4. Intel App Innovation Contest 2013 - eHealthCare

5. Grand Prize Winner of CodeProject HTML5 &CSS3 Article Contest 2014

6. Grand Prize Winner of CodeProject Android Article Contest 2014

7. Grand Prize Winner of IOT on Azure Contest 2015

Comments and Discussions

 
QuestionQuestion Pin
Member 1206160018-May-17 4:51
Member 1206160018-May-17 4:51 
QuestionVery Nice Article which clears basic concepts Pin
Tushar Bhatt1-Nov-16 20:15
Tushar Bhatt1-Nov-16 20:15 
QuestionPerfect for newsbies Pin
XLWEB SEO Company26-Sep-16 10:59
XLWEB SEO Company26-Sep-16 10:59 
GeneralMy vote of 5 Pin
XLWEB SEO Company26-Sep-16 10:46
XLWEB SEO Company26-Sep-16 10:46 
QuestionCan i am using it with Bootstrap Platform? Pin
Jigna As22-Jan-16 19:25
Jigna As22-Jan-16 19:25 
AnswerRe: Can i am using it with Bootstrap Platform? Pin
Ranjan.D23-Jan-16 3:49
professionalRanjan.D23-Jan-16 3:49 
QuestionThanks, but where is 2? Pin
Louis van Alphen9-Sep-15 10:11
Louis van Alphen9-Sep-15 10:11 
AnswerRe: Thanks, but where is 2? Pin
Ranjan.D9-Sep-15 14:55
professionalRanjan.D9-Sep-15 14:55 
General<h1>Very Good Article<h1> Pin
Nodji Junior15-Aug-15 8:12
Nodji Junior15-Aug-15 8:12 
GeneralRe: <h1>Very Good Article<h1> Pin
Ranjan.D16-Aug-15 11:38
professionalRanjan.D16-Aug-15 11:38 
Questionquestion Pin
Mary Jane Rutkowski28-May-14 3:43
Mary Jane Rutkowski28-May-14 3:43 
AnswerRe: question Pin
Ranjan.D28-May-14 4:05
professionalRanjan.D28-May-14 4:05 
GeneralRe: question Pin
Mary Jane Rutkowski28-May-14 4:09
Mary Jane Rutkowski28-May-14 4:09 
GeneralMy vote of 5 Pin
BSRK17-Apr-14 19:28
BSRK17-Apr-14 19:28 
GeneralRe: My vote of 5 Pin
Ranjan.D18-Apr-14 0:38
professionalRanjan.D18-Apr-14 0:38 
GeneralThanks for the submission! Pin
Kevin Priddle3-Apr-14 9:07
professionalKevin Priddle3-Apr-14 9:07 
GeneralRe: Thanks for the submission! Pin
Ranjan.D5-Apr-14 9:54
professionalRanjan.D5-Apr-14 9:54 
GeneralGood Article Pin
Ravi Gadag29-Mar-14 18:17
Ravi Gadag29-Mar-14 18:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.