Click here to Skip to main content
12,297,983 members (54,572 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

34.5K views
644 downloads
69 bookmarked
Posted

Beginner's Guide to HTML5/CSS3 - Part 1 of 12

, 2 Apr 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Writing your first code

List of Articles in Series

  1. Writing your First Code
  2. Building on the Basics
  3. Styling Your First Web Page
  4. Laying Out Your First Web Page

Brief History

HTML - HyperText Markup Language

HTML started its life in 1989, when it was designed to be the publishing language of the newly created World Wide Web. It uses the approach of all the markup languages, that originated in the classic paper-publishing, where editors were 'marking-up' the manuscript for revisions. At that time, HTML wasn't a strict definition, but more an idea about how to transfer and link information over the Web.

In the early 90s, everyone got interested about the Web. Different user agents (a user agent is software that renders the content of one HTML document on the specific device on which the agent runs - today we mostly use the word "browser" for user agent and that is what I will do from now on) were born with slightly different implementations of the HTML idea (ENQUIRE, NeXT, HyperCard).

As interest grew, the early inventors of the Web were looking for an agreed approach toward standard HTML. To achieve this goal, the very first HTML standard (HTML+) was created in 1993. It was based on the well known SGML. However, HTML is based on SGML it does not(!) comply with it in all aspects.

1994 was a busy year concerning HTML. That year held the first World Wide Web conference which was in Geneva. During that conference, the need for an update for the HTML standard was discussed. As an answer, ITEF formed a working group that started circulating a draft of the upcoming HTLM 2. That same year, W3C was formed to represent the group of developers who voted for open standards. With the combined effort of all parties, HTML 2 came to life in 1995. HTML 2 declared the foundations of the HTML as we know it today.

With the immense popularity of the Web, in 1995 the power of the browser creators grew. This and the extremely large number of members in ITEFs working group called for the reorganization of the standardization process. Under the coordination and management of W3C, a new group was born, formed from representatives of browser companies and key figures of the Web. This format of decision making is still used in W3C's standardization process. As a result of changes, forming HTML 3 standard was dropped and remade after two years - HTML 3.2 which was out in 1997.

Between the emerging browser wars, W3C kept updating HTML and in late 1999 released the HTML 4 standard.

The power and the success of these standards can be seen by the time passed between HTML 4 and HTLM 5 - the very first draft of HTML 5 was published in 2008 only! HTML 5 is meant to replace all previous versions (where HTML 2 and before was declared as deprecated), while providing full backwards compatibility.

The current state of the HTML 5 standard is 'Candidate Recommendation' (published on February 2014) - and according to the authors, it is meant to be the last version before becoming a 'Recommendation'...

Even though we will not meet the face of HTML 5 in this article, it is important to understand that HTML 5 is not only the new version of the hypertext standard, but also a global name for all the efforts W3C makes to bring web development to a new level. It includes not only HTML itself, but also CSS 3 and a great number of JavaScript libraries. The main idea behind this approach is to bring browsers to a level where it became possible to develop web applications that can compete with desktop applications, without different (and non-standard) plugins.

CSS - Cascading Style Sheet

While working on HTML 2, the issue of separation of concerns arose. The answer was CSS 1 in 1996. As the new form of decision making was already in place, W3C was able to define CSS 1 in a very short time, for the next versions they took almost the same time frame as HTML ... CSS 2 was released year after HTLM 3.2 in 1998. This version went through several updates until it became CSS 2.1 in 2011. The reason for these updates was the growing variety of devices used to display Web pages.

W3C started working on CSS 3 around 1999, but with this version they took a different approach. Instead of creating a single specification, W3C broke CSS into pieces and went to define recommendation for every part alone. W3C also made an unprecedented step, when in 2005 recalled all the already approved recommendations for a second trip and marked them as 'Working Draft' again. That was done to ensure the quality of the recommendations.

Today, of all the parts of CSS 3 (and there are over 20), only 7 got 'Recommendation' status.

What is HTML and CSS used for?

HTML is a markup language that implement the 'mark' part using tags (mostly in pairs of opening-closing tags). These tags are used to define the content (and sometimes the layout) of the information it 'marks'. In theory, HTML can be used for almost every kind of content, but de-facto it used - and became a standard - for web pages almost exclusively.

A pseudo declaration of any HTML tag should look like this:

<tag-name [attribute-list]>[tag-content][</tag-name>]

For example, to declare part of the text as a paragraph, we use the P tag, like this:

<p>This is a paragraph about nothing.</p>

Where inserting an image into our HTML document, we use the IMG tag:

<img src="my_image.png" alt="It's me!"> 

For every tag, there is a declaration that explains how it has to be used. It can, must or can-not have a closing pair. It it can, must or can-not use attributes and so on. For a comprehensive list of HTML tags and how to use them, see: HTML Reference - w3schools.com.

CSS is used to define the look-and-feel (and sometimes the layout) of an HTML page it's connected to. With CSS, you define how the content - identified by the enclosing HTML tag - will be presented to the end user. The CSS file is built of a list of rules assigned to HTML tags using selectors (those selectors are meant to identify one or more HTML tags). Because CSS is external for the content (HTML), it enables different formatting for different devices with ease.

A CSS rule can be defined like this:

selector {
  attribute-name: attribute-value [attribute-value [...]]; 
  [attribute-name: attribute-value [attribute-value [...]];] 
}

For example, the default CSS declaration for H2 tag in Google Chrome looks like this:

h2 {  
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

It is important to understand that in modern browsers, CSS is always there. Even if you do not assign your own CSS (and you will not in this article), the browser provides a basic set of rules to achieve some elementary formatting for every HTML document.

Now you may ask how you can alternate those already defined styles? CSS rules are interpreted using a priority scheme where - by default - newer rules are overriding older rules for the same selector. So since the very first CSS is that of the browser and all your rules come later, your rules have the ability to change default design.

To get more information on CSS, you can start here: CSS3 Introduction.

The ... and Sometime the Layout ... Issue

In the early stages of HTML (HTML 2 - 3.2), most layouts were defined using HTML TABLE tag (because HTML was a playground for developers who know nothing of design). The TABLE tag was able to break the page into non-symmetric areas, and create the illusion of true layout. However, this kind of mixing concerns did not please the W3C (and the emerging horde of designers) and the organization pushed the use of CSS for layout, especially with the coming of CSS 2.

We will discuss this in further articles, but for now, it is enough for you to remember that the right way to do layout is using CSS and not tables.

What Do You Need?

For the simple HTML, all you need is a text editor (vim, Notepad) and a web browser (IE, FF, Chrome). However, today HTML is rarely used alone for true development. It is always paired with some JavaScript and some kind of server side technology, like PHP or ASP.NET. For more complex development, it is recommended to use some IDE (that fits your choice of environment). A partial list of such tools (compiled by CodeProject members) can be found here: Your Development Tools.

If you choose some IDE for your development, that IDE will aid and guide you how to store and view your pages. However, if you choose some simple text editor for your first step in HTML development, remember this: save your HTML files with extension HTML, and CSS files with extension CSS. That will enable to you to open them automatically by every browser.

Basic HTML

HTML not only identifies the meanings of its tags but also enforce a basic structure. The minimal HTML page has to contain document type declaration, head and body. Head, in it turn, has to contain a title declaration.

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
    </head>
    <body>
    </body>
</html>

This code represents a valid, but totally useless HTML. Useless as it does not display anything. Now let's add valuable content.

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
    </head>
    <body>
        <h1>Introduction</h1>
        <h2>The first decade</h2>
        <p>History of the first decade...</p>
        <h2>Later years</h2>
        <p>What happened later...</p>
        <h1>Why we doing it?</h1>
        <p>Some explanation...</p>
        <p>Extended explanation...</p>
        <h1>Summary</h1>
        <p>Summary...</p>
        <h1>Contact details<h1>
        <h2>Support</h2>
        <p>123-123456789</p>
        <h2>Development</h2>
        <p>123-123456789</p>
    </body>
</html>

The code above renders this page in the Google Chrome browser.

Tags We Used...

Now we will get into the explanation of the basic tags we used in the simple HTML from the previous sample.

DOCTYPE

DOCTYPE is a shorthand for Document Type Declaration. It is used as a version stamp, that tells the browser how to interpret the following HTML content, and it will always be the first line of your code. For HTML 5, it is always <!DOCTYPE html>. Earlier versions of HTML used some - more complicated - other strings, you need not know them as you will do HTML 5 only now on!

<!DOCTYPE html>

HTML

HTML tag is the main container (root) of any HTML document. All the HTML documents (except DOCTYPE) must be included between the opening and closing tag of HTML. Inside the HTML tag, the document is organized into two mandatory tags HEAD and BODY.

<!DOCTYPE html>
<html>
</html>

HEAD

HEAD tag is a grouping tag, that contains all the so called 'head elements'. These are elements that are used to define information about the document. It may include meta-data (e.g. for search engines), links to external sources (e.g. CSS files) and others. The only mandatory 'head element' is the TITLE tag, that is used to define the title of the HTML document.

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

TITLE

TITLE tag is mandatory, you must have one, and only one of it. Without this, an HTML document will not be valid. It will contain a human-readable string that is presented as the document title for browsers and search engines too.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
</html>

BODY

BODY is the second part of any HTML document. It is the container for all the tags used to define the content of the HTML document - 'body elements'. Surprisingly BODY is not mandatory, and when provided it can be totally empty. I believe that W3C doesn't make it mandatory because there is not much sense in creating an empty HTML document, so no-one will leave it out without good reason, but if he has a good reason, it can be omitted. However, when presented, it must be the second element - after HEAD - inside the HTML tag.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

HEADINGS

BODY can contain several tags to mark the content and within them, the heading tags are used to create - headings, or in other words, to create levels of captions for the HTML document content (just as in this article). Headings are represented by tags H1 to H6, where H1 represents the most important heading and H6 the less important.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1></h1>
    <h2></h2>
?  </body>
</html>

PARAGRAPHS

Paragraphs are the main building blocks of all text content. It is used to break the text into readable chunks. In HTML documents, a paragraph is created using the P tag.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <h1></h1>
    <h2></h2>
    <p></p>
    <p></p>
?  </body>
</html>

Sample Code

The code in the zip file at the top of the article contains the HTML and CSS for the article itself. It mostly uses the very same tags I talked about in the article. Go ahead and dig in ...

You may also notice that when I explain the role of the tags, I add a link to the corresponding page in w3schools.com. These links can provide you with more information about the tag.

Summary

I'm pretty sure that you have finished this part with more questions than answers, but please be patient and remember it's only the first of twelve articles, so hopefully you will get all the answers you need by the end.

License

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

Share

About the Author

Kornfeld Eliyahu Peter
Software Developer (Senior)
Israel Israel
Born in Hungary, got my first computer at age 12 (C64 with tape and joystick). Also got a book with it about 6502 assembly, that on its back has a motto, said 'Try yourself!'. I believe this is my beginning...

Started to learn - formally - in connection to mathematics an physics, by writing basic and assembly programs demoing theorems and experiments.

After moving to Israel learned two years in college and got a software engineering degree, I still have somewhere...

Since 1997 I do development for living. I used 286 assembly, COBOL, C/C++, Magic, Pascal, Visual Basic, C#, JavaScript, HTML, CSS, PHP, ASP, ASP.NET, C# and some more buzzes.

Since 2005 I have to find spare time after kids go bed, which means can't sleep to much, but much happier this way...

Free tools I've created for you...


You may also be interested in...

Comments and Discussions

 
GeneralGreat article! Pin
Alex Sanchez SM27-Mar-14 22:36
memberAlex Sanchez SM27-Mar-14 22:36 
AnswerRe: Great article! Pin
Kornfeld Eliyahu Peter27-Mar-14 23:51
professionalKornfeld Eliyahu Peter27-Mar-14 23:51 
AnswerRe: Great article! Pin
Kornfeld Eliyahu Peter30-Mar-14 6:36
professionalKornfeld Eliyahu Peter30-Mar-14 6:36 
GeneralThanks for the submission! Pin
Kevin Priddle27-Mar-14 11:11
staffKevin Priddle27-Mar-14 11:11 
GeneralRe: Thanks for the submission! Pin
Kornfeld Eliyahu Peter27-Mar-14 11:13
professionalKornfeld Eliyahu Peter27-Mar-14 11:13 
GeneralRe: Thanks for the submission! Pin
Kevin Priddle28-Mar-14 3:28
staffKevin Priddle28-Mar-14 3:28 
AnswerRe: Thanks for the submission! Pin
Kornfeld Eliyahu Peter30-Mar-14 6:40
professionalKornfeld Eliyahu Peter30-Mar-14 6:40 
QuestionAnother vote of 5 Pin
kiwerry27-Mar-14 7:54
memberkiwerry27-Mar-14 7:54 
AnswerRe: Another vote of 5 Pin
Kornfeld Eliyahu Peter27-Mar-14 7:56
professionalKornfeld Eliyahu Peter27-Mar-14 7:56 
AnswerRe: Another vote of 5 Pin
Kornfeld Eliyahu Peter30-Mar-14 6:36
professionalKornfeld Eliyahu Peter30-Mar-14 6:36 
GeneralMy vote of 5. Pin
kArViD0tnEt26-Mar-14 23:30
professionalkArViD0tnEt26-Mar-14 23:30 
GeneralRe: My vote of 5. Pin
Kornfeld Eliyahu Peter26-Mar-14 23:45
professionalKornfeld Eliyahu Peter26-Mar-14 23:45 
GeneralRe: My vote of 5. Pin
kArViD0tnEt27-Mar-14 14:55
professionalkArViD0tnEt27-Mar-14 14:55 
AnswerRe: My vote of 5. Pin
Kornfeld Eliyahu Peter30-Mar-14 6:36
professionalKornfeld Eliyahu Peter30-Mar-14 6:36 
QuestionEnglish Pin
DragonHeart33525-Mar-14 8:45
memberDragonHeart33525-Mar-14 8:45 
AnswerRe: English Pin
Kornfeld Eliyahu Peter25-Mar-14 8:48
professionalKornfeld Eliyahu Peter25-Mar-14 8:48 
AnswerRe: English Pin
Kornfeld Eliyahu Peter26-Mar-14 8:50
professionalKornfeld Eliyahu Peter26-Mar-14 8:50 
AnswerRe: English Pin
Kornfeld Eliyahu Peter30-Mar-14 6:40
professionalKornfeld Eliyahu Peter30-Mar-14 6:40 
GeneralMy vote of 5 Pin
Christian Amado25-Mar-14 5:18
professionalChristian Amado25-Mar-14 5:18 
GeneralRe: My vote of 5 Pin
Kornfeld Eliyahu Peter25-Mar-14 5:23
professionalKornfeld Eliyahu Peter25-Mar-14 5:23 
AnswerRe: My vote of 5 Pin
Kornfeld Eliyahu Peter30-Mar-14 6:36
professionalKornfeld Eliyahu Peter30-Mar-14 6:36 
GeneralRe: My vote of 5 Pin
Christian Amado31-Mar-14 1:54
professionalChristian Amado31-Mar-14 1:54 
GeneralRe: My vote of 5 Pin
Kornfeld Eliyahu Peter31-Mar-14 1:57
professionalKornfeld Eliyahu Peter31-Mar-14 1:57 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160525.2 | Last Updated 2 Apr 2014
Article Copyright 2014 by Kornfeld Eliyahu Peter
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid