introduction to HTML 2

Creating websites is not as tough as it seems to be. Learn how to code a simple HTML page with HTML – the widely used Markup Language for the Web.

Designing and creating a simple website is easy. Even beginners can learn web designing without putting in too much effort and time. HTML is the first Internet-based Markup Language. It is the core markup for all web pages and is an integral part of the Web. If you are a Web developer or designer and need to develop some great websites, then you can do it with HTML. It is an easy to acquire and a core skill for all web developers and designers. Let us learn the basics of HTML markup and use it to create a Simple HTML Page.

Introduction to HTML

HTML stands for HyperText Markup Language

• HyperText is text that works as a link.
• Markup Language defines layout information within a document.

HTML defines the structure of a web page. It provides indications to the browser to suitably display the web page. An HTML document can be very basic or complex to provide more features.
Web browsers receive HTML documents from a web server and display them as web pages. The web browser understands HTML codes to change the layout, add images, links and media to the web pages.
HTML is the primary Markup Language for the Web. It is however used to build static web pages with no interactivity and animation. HTML5, the latest revision of HTML adds better support for adding media like video and audio.

HTML5

HTML has evolved to its most recent version, HTML5, which adds more features than previous versions and can now define the way videos, images, and text look on the browser display.

HTML5 is the fifth implementation of HTML. The HTML5 syntax is compatible with the basic syntax of HTML4 and XHTML1. HTML5 differs from HTML in that video and audio support is added with HTML5. HTML5 is one of the powerful tools for web page design. With HTML5, media streaming is possible without using third party plugins such as Flash. HTML5 also supports storing data on client side. This can be used to support the web application when the client is offline.

The Web and HTML

The web is made up of interlinked web pages and apps, along with images, videos, animations and interactive content. Markup Languages form the foundation of the Web. These languages are being used since the time when websites were very plain. Markup Languages will continue to be a part of the Web, its development, and future as well.
HTML is the core markup for all web pages which is why it remains such a fundamental skill for all web developers and designers. HTML is a widely used markup and most documents on the Web are stored and transmitted in HTML.

As per a survey by W3Techs, HTML is the language used by 74.3% of the websites.

Among the sub-categories, HTML5 is used by 82.9% of all the websites who use HTML.

How to Design a Simple HTML page

HTML development is simple. With no HTML knowledge, one can easily learn how to code a simple HTML page. HTML coding requires the designer to understand the fundamentals first. After we understand the basics then we can try to understand how to create an HTML page.

HTML coding with a Text Editor

HTML is plain text and it is possible to hand-code a web page in HTML. An HTML document is basically a text document. There are plenty of Text Editors available that you can use for writing HTML. Two popular Text Editors are Dreamweaver and Sublime Text. Free editors include Notepad++ for Windows and Text Wrangler for Mac. You should avoid using Notepad which is popular but is not a fully functional Text Editor with advanced features. Word Processors should also not be used as these add extra and unnecessary code to the HTML documents.

For the HTML samples that we show here, we will use Notepad++ as an editor. You can choose any editor of your choice.

• Creating and Editing HTML

Creating a new HTML document is the same as for any other document type. Select File>New to open a new document in Notepad++. Make changes to the document and Save.

• Saving HTML

An HTML document is a file with an .htm or .html extension. Some editors may also provide an option to “Save As HTML”. For saving HTML documents for the web you should use lower-case in file names. Hyphens or Dashes should replace any occurrences of space.

HTML Page Format

An HTML page is primarily defined by its Elements, Tags, and Attributes. These help us define the content of the website. The HTML elements also enable us to add tables, images, video, audio etc. to the web page.

Figure 1: Simple HTML Page Structure

HTML Elements

Elements define the structure and content of the web page. Elements are identified by the enclosing Angle Brackets around the element name. Content that is not between “< >” will be displayed on the website. An element looks something like the following:

<element-name>

Tags

The element with the angle-brackets around it forms a Tag (<tag>). Tags cannot be seen on the screen but help the browser to understand what it has to display. An opening tag marks the start of an element while a closing tag marks its end.

e.g.

Opening tag: <div>

Closing tag:</div>

The content between the opening and the closing tag is the element’s content.

Tags can be used in two ways:

• Using Tags in Pairs

Tags that come in pairs contain the opening and the closing tags together. This is what they look like:

<paragraph>This is a text</paragraph>

There is an opening tag (<paragraph>) and a closing tag (</paragraph>) to indicate the end of the paragraph. This means that everything that is between these two tags is a paragraph.

• Orphan Tags

Orphan tags are used to define Self-Closing Elements and insert elements like images. You do not need to define the start and the end of these elements.

Self-Closing Elements are written like this:

<image/>

The closing /(slash) is also not compulsory. It is the same as writing <image>. However, to avoid confusion with an opening tag, it is a good practice to add the / (slash) at the end.

Attributes

Attributes are tag options that enhance the tags with extra information. The Attribute is placed within the opening tag and includes a name and a value.

A simple tag would be like:

<html lang=”en-US”/>

The “HTML” tag above has an attribute “lang” with value “en-US”.

The Structure of an HTML Document

Every HTML document has a basic structure defined using the following elements:

• DOCTYPE or DTD: The Document Type Declaration specifies the version of HTML used. This tag is placed at the start of the document.
• HTML: The HTML tag pair specifies the begin and end of the HTML document.
• The HEADER <head> Section: This section defines general information for the page and is usually quite short. The content of this element is not shown on the page. The Header contains the TITLE Tag which defines the document title displayed in the browser title bar. The Header may also contain metadata or links to external files.
• The BODY Section: This section contains the main part of the page. Its contents are displayed on the browser. Most of the HTML page code resides within the body element.
• The Charset and Encoding: This Tag indicates the encoding used in the HTML document. The encoding specifies how the file is saved and how the special characters will be displayed. The universally accepted value for this tag is UTF-8 which allows almost all the language symbols to be displayed correctly.

A Simple HTML Page

Now that we have understood the basic HTML elements in an HTML document, let us try to create a basic HTML page. Let us begin with creating a blank text document in a Text Editor.

Step 1: The first line of HTML code to be added specifies the DOCTYPE element as “html”. It implies that the latest version of HTML is used.

<!DOCTYPE html>

Step 2: Next we add the Begin and End tags for the html document. We also specify the language as English (en).

<!DOCTYPE html>
<html lang=”en”>
</html>

Step 3: We next add the Header tag with the Title tag and the Charset details.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Hello World</title>
</head>
</html>

Step 4: After that comes the BODY tag which encloses the actual HTML code.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Hello World</title>
</head>
<body>
</body>
</html>

Step 5: We are now ready with a blank HTML document. Let us start adding text content to be displayed. We add a Heading tag <h1> and a Paragraph tag<p>. These specify a first level heading and a paragraph below it.

<!DOCTYPE html>

<html>
<head>
<meta charset=”utf-8″>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>A Simple HTML Page</p>
</body>
</html>

The basic HTML page is ready and we can save it to a folder of our choice.

Viewing the HTML Page

To view the HTML page, we need to open it in a browser. Navigate to the folder where you saved the HTML document and double click on it.

The browser loads the page and we see a very basic page. You can verify that it shows:

• Title as “Hello World”
• First level heading as “Hello World”
• Paragraph with text “A Simple HTML Page”

Now that we have created a simple HTML page let us look at how we can add advanced features to our page. HTML provides many more features than what we added to the basic HTML page. You can add advanced formatting like background color, fonts, font colors, images, links, lists etc. to create a beautiful HTML page. Let us look at some of these advanced features.

Advanced Text Formatting

HTML provides specific elements for special formatting of text.

Heading levels can be specified using the <h1></h1> to <h6></h6> tags for the 6 levels of headings available.

Paragraph tags <p></p> are used to indicate the start of a new paragraph. The browser usually displays the output as two carriage returns, adding a single blank line between two paragraphs. Formatting elements are used to display special types of text. Text can be formatted with elements such as:

• Bold –

  <b> </b>

• Italic –

  <i> </i>

• Underline –

  <u> </u>

• Font –

  <font> </font>

A complete list of these tags is available in the HTML reference.

Adding Links

You can create a hyperlink to another web page using the <a></a> tag. Add the URL of the web page using the href attribute as shown below.

<a href=”https://www.xyz.com/SimpleHTMLPage”>This is a link. </a>

Adding Images

The <img> tag is an Orphan tag with no Closing tag required. You can specify image attributes for adding information. The src attribute tells the location of the image. The style attribute has many options including the width and height of the image in pixels. The alt attribute gives a short description of the image. It is used if the image fails to load due to some reason. This attribute is now considered a requirement as it is needed by screen readers for blind visitors.

<img src=http://www.xyz.com/ images/testlogo.png style=”width:324px;height:84px” alt=”Test logo”>

Adding Header

The <HEADER> tag is new to HTML5 and specifies the topmost element of the web page. Headers usually contain the company logo, contact information, navigation links etc. There can be several <header> elements in one document.

Advanced Concepts in HTML

HTML is a simple technology to learn, so many designers just work with a very basic understanding of the concepts. If you wish to take full advantage of HTML, then you would want to learn about the advanced concepts. It would help you design a better-looking website with lesser effort and time.

We mention a few of the concepts to further guide you. You can continue to explore more and use advanced HTML and its features.

Validating the HTML

HTML Validation is used for checking errors in the HTML code. If your web page doesn’t load, you can use Validation to find the cause of the problem.

Validation also makes recommendations on code that does not match with the latest HTML standard. Invalid HTML will not make a site unusable. It can cause loading problems or inconsistency in the output with different browsers. Many validation services are free and like the one from W3C can be easily used.

Adding Advanced Tags

There are much more HTML tags and attributes than what we discussed here. Two good resources for learning are the w3schools and HTML Dog which have more tutorials and a comprehensive list of tags.
You can also use the browser’s “View Page Source” option to look into the code of well-designed websites and learn new techniques.

Uploading the website

With a web hosting service, you can add several HTML pages to your web domain. You might need to use an FTP uploading software to transfer your HTML files to the web server. There are many web hosting services that provide the FTP func
tionality as well.

Adding CSS and JavaScript

CSS can be used to quickly enhance the look of your website. You can use CSS to add color, fonts, and modify element placement. With linking a CSS “stylesheet” to the HTML page you can alter the style of all text within the tag.
JavaScript is a programming language and can be used to add more functionality to HTML pages. JavaScript commands are inserted between the <script> </script> tags. These can be used to add interactive buttons, perform mathematical calculations etc.

Auto Create HTML Websites

HTML is simple but many beginners may still find it cumbersome to learn. Web Designers may not have the time to learn HTML but may need to create spectacular websites quickly. TemplateToaster is a web design software that can be used by novice designers. You can use it to create websites for popular CMS like WordPress, Joomla, Magento, Drupal, and Prestashop.