How it works
Download
Tutorials
Share
Blog
Feedback

HTML tutorial

  1. HTML tutorial
In this HTML tutorial we’ll try to tell you in brief the most common operations, main functions and options of HTML. Most of designers and bloggers who we created Divine for are people not deeply aware of HTML coding. This is why we composed an easy to understand and short HTML guide for you to learn HTML basics in less than one hour.

HTML help – About

To start let’s consider what HTML is. HTML (Hypertext Markup Language) is a markup language used for creating web pages. “HTML tags” are applied to format different parts of the document. For instance, you use HTML tags to specify tables, paragraphs, images, lists, headings etc.
No specific equipment or software is required for HTML coding. Actually, you are already able to have everything you need. Our HTML guide advises you possessing the following:
  • Text editor, e.g. Notepad (in Windows), Pico (in Linux) or SimpleText (Mac). You could use an HTML editor if you like but it’s not necessary in fact.
  • Web Browser, e.g. Internet Explorer or Firefox.
You can create web pages being off-line. Just work on this issue as long as you want and where you want. You’ll need to go online only as the page is ready and you want to publish it to the web – we’ll return to it later in this HTML tutorial.
The following part of the HTML basics will teach you how to create a web page in less than 5 minutes.

HTML help for getting started

Now let’s set to creation of a page. Learn how simple it is to create a web page with our HTML help. In fact, by the time you’ve finished this web page, you will have created your own one!\
Here’s the list of actions you are to carry out while creating a web page:
  • Create an HTML file
  • Type some HTML code
  • View the result in your browser
  • Repeat last 2 steps (if required)
Now let’s consider each point in details.

Create an HTML file

As we’re speaking of HTML basics here, the first important thing to know is an HTML file. It is just a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).
Open your text editor on the computer (this will probably be “Notepad” if you’re using Windows or “SimpleText” if you’re using Mac). By the way, you can use a special HTML editor such as Dreamweaver or FrontPage if you prefer. Create a new file (if you haven’t done it yet). Save the file as html_tutorial_example.html

Type some HTML codes

We’ve just coded a bunch of HTML tags. They tell the browser what and where to display. You might have noticed that there is a pair of elements tags with a “start” tag (<head>) and “end” tag (</head>), and all the actual, textual or graphic information content is rendered on the display between them. Most HTML tags have an opening and closing tag. Please remember all the details of HTML coding to avoid misunderstanding hereafter. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>HTML Tutorial Example</title>
	</head>
	<body>
		<p>Less than 5 minutes with this HTML tutorial 
			and I've already created my first homepage!</p>
	</body>
</html>

View the result in your browser

Navigate to your file by double clicking on it.
As a developer tells, any website may be divided into two levels: logical and physical. A website is a collection of related web pages of the common design, style and links on the logical level. At the same time on the physical level, a website is a set of files of different types, such as programs, documents, images, etc. Well thought and created file structure that is easy in use helps either developer optimize his work or customers understand the site structure. The next section of this HTML help is devoted to a bit more details about HTML tags.

What file is to be launched

A website has usual starting point or opening page, called a home page. There are many various files in the website root, so, what one will web server launch automatically? Of course, if there is a direct path to the file, no question occurs. But in most cases a website address is indicated shortly, without any files at the end. In this case the server settings are to be applied: indication of the file name and if it is available at all. As a rule, this file is index.html, index.htm, default.htm, default.html.
At indication of a path to various files and folders, documents will be revealed in the browser as you could see in the table below:
Path What is launched
http://www.mysite.com http://www.mysite.com/index.html
http://www.mysite.com/about.html http://www.mysite.com/about.html
http://www.mysite.com/sevices/ http://www.mysite.com/sevices/index.html
http://www.mysite.com/company/contact http://www.mysite.com/company/contact/index.html
As you might have noticed, if the path to the file is even indicated not in full, the web server will put near missing values itself. You may use this feature while creating links to various documents. It will not affect their operability.

HTML guide for tags

HTML tags are the basics of HTML coding. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. The place for an element to appear is determined by the order of tags.
HTML consists of almost 100 tags. But don’t worry – you will probably use only a certain number of tags for your HTML coding. However it’d be better you know other tags as they are HTML basics for work with web pages. We’ll proceed with it later in this HTML guide.
Now let’s look through the example we created in the previous part of our HTML basic guide. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>HTML Tutorial Example</title>
	</head>
	<body>
		<p>Less than 5 minutes into this HTML tutorial and
			I've already created my first homepage!</p>
	</body>
</html>
Explanation of the above code:
The <!DOCTYPE…> element tells the browser which version of HTML the document is using.
The <html> element is a kind of a container for all other tags (except for the !DOCTYPE tag).
The <head> tag contains information that is not commonly viewable within your browser (Meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser’s title bar.
The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.
The <p> tag declares a paragraph. This contains the body text.

HTML help for closing your tags

You already know and have mentioned, all of these tags have opening and closing tags, and the content of the tag is placed within them. There are a few exceptions to this rule.
You’ll also notice that the closing tag is slightly different to the opening tag – the closing tag has a forward slash (/) after the <. This shows the browser that this tag closes the previous one.

UPPERCASE or lowercase?

Although most browsers display the page regardless of the case you use, you should always code in lowercase. This keeps your code XML compliant (that’s another question though, we’ll get back to it in the following parts of this HTML help).
Therefore:
  • Good: <head>
  • Bad: <HEAD>
In the next part of this HTML guide we’ll consider some of the more common formatting tags.

HTML help for formatting

You might have already met some of the formatting options in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. So, you’ll be glad to know many of these formatting features are available in HTML too, which considerably simplifies the process of HTML coding for you! This part of the HTML tutorial contains information about more common formatting options.

Headings

There is a special tag for headings in HTML. There are 6 levels of headings in HTML ranging from h1 for the most important, to h6 for the least important.
Typing this code:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Bold

You specify bold text with the <b> and <strong> tag.
Typing this code:
<b>This text is bold.</b>
This text <strong>is bold.</strong>
Results
This text is bold.
This text is bold.

Italics

You specify italic text with the <i> tag.
Typing this code:
<i>This text is italicised.</i>
Results
This text is italicised.

Line Breaks

Typing this code:
<p>Here is a…<br />line break.</p>
Results in this:
Here is a…
line break.

Horizontal Rule

Typing this code:
Here’s a horizontal rule… <hr /> …that was a horizontal rule :)
Results in this:
Here’s a horizontal rule…
…that was a horizontal rule :)

Unordered (un-numbered) list

Typing this code: 
<ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
</ul>
Results in this:
  • List item 1
  • List item 2
  • List item 3

Ordered (numbered) List

Please note: the only difference between an ordered list and an unordered list is the first letter of the list definition (”o” for ordered, “u” for unordered).
The code is as follows: 
<ol>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
</ol>
Results in this:
  1. List item 1
  2. List item 2
  3. List item 3
We will be covering more HTML tags throughout this tutorial, but before we do that, you should know about attributes.

HTML basics for the links

Links, also known as hyperlinks, are defined using the tag – also known as an anchor element.
To create a hyperlink, you use a tag in conjunction with the ‘href’ attribute (‘href’ stands for Hypertext Reference). The value of the ‘href’ attribute is the URL, or, location of where the link is pointing to.
Example HTML Code:
Visit the <a href=”http://www.mysite.com/blog/”>Natural Environment Blog</a>
Hypertext references can use absolute, relative or root relative URLs.
  • absolute
    • It refers to a URL where the full path is provided. For example, http://www.quackit.com/html/tutorial/index.cfm
  • relative
    • It refers to a URL where only the path, relative to the current location, is provided. For example, if we want to reference the http://www.mysite.com/html/tutorial/index.html URL, and our current location is http://www.mysite.com/html, we would use tutorial/index.html
  • root relative
    • It refers to a URL where only the path, relative to the domain’s root, is provided. For example, if we want to reference the http://www.mysite.com/html/tutorial/index.html URL, and the current location is http://www.mysite.com/html, we would use /html/tutorial/index.html. The forward slash indicates the domain’s root. No matter where your file is located, you can always use this method to determine the path, even if you don’t know what the domain name will eventually be.

    Link target in HTML coding

    You can specify whether to open the URL in a new window or the current window. You do this with the target attribute. For example, target=”_blank” opens the URL in a new window.
    The target attribute can have the following possible values:
    • _blank Opens the URL in a new browser window.
    • _self Loads the URL in the current browser window.
    • _parent Loads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.
    • _top Loads the URL in the current browser window, but cancelling out any frames. Therefore, if frames were being used, they aren’t any longer.
    Example HTML Code:
    Visit the <a href=”http://www.mysite.com” target=”_blank”>Natural Environment</a>
    You can make your links “jump” to other sections within the same page. You do this with named anchors.
    To use named anchors, you need to create two pieces of code – one for the hyperlink (this is what the user will click on), and one for the named anchor (this is where they will end up).
    This page uses a named anchor. We do this by performing the steps below: We created the named anchor first (where the user will end up).
    Example HTML Code:
    <h2>Link Targets<a name=”link_targets”></a></h2>
    Then we create the hyperlink (what the user will click on). This is done by linking to the name of the named anchor. You need to precede the name with a hash (#) symbol.
    Example HTML Code:
    <a href=”#link_targets”>Link Targets</a>
    When you click on the ready link, this page should jump up to the “Link Targets” section (above). You can either use your back button, or scroll down the page to get back here.

    HTML Images

    Images are a big part of the web space – most websites have various images. HTML coding makes it very easy for you to insert images into your web page.
    To place an image into a web page, the image first needs to be in either .jpg, .gif, or .png format. You can create images in an editor, such as Adobe Photoshop, and save them in the format needed.
    As soon as you’ve created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.
    Example of Image Usage
    HTML Code:
    <img src=”http://www.mysite.com/pix/smile.gif” width=”100″ height=”100″ alt=”Smile” />
    The img contains a number of attributes. They show the browser all about the image and how to display it. Here’s an explanation of these attributes:
    • src – Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from the previous part of our HTML guide?)
    • width – Optional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. In this HTML tutorial it’s not recommended to specify a different size for the image, as it will lose quality. It’s better to make sure the image is the correct size beforehand to start with.
    • Height – Optional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
    • Alt – Alternate text. This specifies text to be used in case the browser/user agent can’t render the image.

    HTML help for image links

    While doing your HTML coding, you can make your images “clickable” so that when a user clicks the image, it opens another URL. You do this by simply wrapping the image with hyperlink code.
    HTML Code: 
    <a href="http://www.mysite.com/html/tutorial">
	<img src="http://www.mysite.com/pix/smile.gif"
		width="100" height="100" alt="Smile" />
</a>

    HTML guide for Meta tags

    Meta tags allow you to provide metadata about your HTML pages. This is an extremely useful point for the search engines; it can help your site be found more frequently on the information on your website.

    HTML help for Metadata

    Metadata is information about other data or information.
    If we apply this notion to a web page, we could probably come up with a lot more information about a web page than what we’re actually displaying to the reader. For instance, there could be a number of keywords that are related to the page. You give the page a description. The page also has an author – right? All these could be examples of metadata.

    HTML basic for Metadata on the Web

    Metadata is an important part of the web. It helps search engines find the best match when a user surfs the net for something. Search engines often look at any metadata of the page – especially keywords – and rank it higher than other pages with less relevant metadata, or without it at all. As you see, HTML basic is not only useful to learn for creating web pages, but also for search engine optimization.

    Adding Meta Tags to Your Documents

    You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can include the following attributes:
    • Attribute
    • Description
    • Name
    “Name” for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
    “content” – Specifies the property’s value.
    “scheme” – Specifies a scheme to use to interpret the property’s value (as declared in the content attribute).
    “http-equiv” – Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.
    Example HTML Code: 
    Keywords:
	<meta name="keywords" content="HTML, meta tags, metadata" /> 
 
Description:
	<meta name="description" content="Contains info about meta tags" />
 
Revision date (last time the document was updated):
	<meta name="revised" content="Quackit, 6/12/2002" /> 
 
Refresh the page every 10 seconds:
	<meta http-equiv="refresh" content="10" />
    The above examples are some of the more common uses for the Meta tag.
  1. [...] for you – you’ll be able to do it yourself. By the way, you’ll find a short understandable HTML tutorial at our site. Keeping on with our tutorial that will help you create your own site: XHTML is the new web language [...]

    Pingback by How to create website without any specific knowledge of html — November 19, 2009 @ 6:22 pm

  2. [...] See original here: Html tutorial. Guide to html basic [...]

    Pingback by Html tutorial. Guide to html basic | ScriptRemix.com Scripts — November 30, 2009 @ 10:37 am

  3. I want to quote your post in my blog. It can? And you et an account on Twitter?

    Comment by magic_spell — December 25, 2009 @ 3:59 pm

  4. Magic_spell, please follow this link: http://www.divine-project.com/help-us-grow

    Comment by Nina — December 26, 2009 @ 10:32 pm

  5. [...] HTML tutorial [...]

    Pingback by Convert PSD to Wordpress with Divine. Convert Photoshop to Wordpress theme — April 19, 2010 @ 1:24 pm

RSS feed for comments on this post.

Leave a comment

HTML tutorial

Just launched. Help us grow!

Tell your friends about us and our product, become a part of historical events...

Bugs? Suggestions?

A great deal is done, but before publishing the full edition we want you to try a free version and give us some suggestions.
Copyright © 2010 Divine All rights reserved
Follow us on Twitter
HTML tutorial | Free PSD templates with Divine | CSS Tutorial | Wordpress templates creation with Divine | Wordpress manual | How to convert psd to html with Divine
How to make a website without any specific knowledge of HTML