Alphalearningschool
        

Next >>>

Up
INTRODUCTION

HTML TUTORIALS      

 

 

This is a  basic tutorial   which will prepare you for the use of more sophisticated HTML editing tools. Here you can learn the basic of HTML. After learning this tutorial, you will be able to make your own web pages

 resources/images/html/htlogo.png

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee  late 1991.

 

  • Hypertextrefers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext.
  • As its name suggests, HTML is a Markup Languagewhich means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display.

 

Words to remember

Tag - used to specify the regions of the HTML document, wh ich a browser will read later. Tags will look like this: <tag>

Element - is a complete tag, having an opening <tag> and a closing </ tag>.

Attribute - is used to change the value of an element in HTML. Usually an element has several attributes.

 

HTML text editors

An HTML editor is a program for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience and added functionality.

 

List of Best Html Editors

  • Notepad +
  • Aptana Studio 3.
  • Sublime Text.
  • Phase 5 HTML editor.
  • Kompozer

Note:  Notepad is a simple text editor and suitable for beginners to learn HTML

 

Building blocks of HTML

An HTML document consist of its basic building blockswhich are:

Tags: An HTML tag surrounds the content and apply meaning to it. It is written between < and > brackets.

Attribute: An attribute in HTMLprovides extra information about the element, and it is applied within the start tag.

The Hypertext Markup Language (HTML) resource is the main markup language for displaying web pages. HTML elements are the building blocks of the HTML web page. The elements consist of a pair of tags (starting and ending tags) and the textual or graphical content inside of the tags.

<p>Hello World!</p>

Inside of the tags, different attributes can be given.

<tag attribute1="value1" attribute2="value2">Hello World!</tag>

The starting HTML webpage we will use is:

 

<!DOCTYPE html>
<html>
  <head> 
    <title>Hello World</title>
  </head>
  <body>
¬¬    <p>Hello World!</p>
  </body>
</html>

HTML Get Started

An HTML file is simply a text file saved with an .html or .htm extension.

Getting Started

In this tutorial you will learn how easy it is to create an HTML document or a web page. To begin coding HTML you need only two stuff: a simple-text editor and a web browser.

Well, let's get started with creating your first HTML page.

Creating Your First HTML Document

Let's walk through the following steps. At the end of this tutorial, you will have made an HTML file that displays "Hello world" message in your web browser.

Step 1: Creating the HTML file

Open up your computer's plain text editor and create a new file.

 

Step 2: Type some HTML code

Start with an empty window and type the following code:

Example

 
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

Step 3: Saving the file

Now save the file on your desktop as "myfirstpage.html ".

 

Note: It is important that the extension .html is specified — some text editors, such as Notepad, will automatically save it as .txt otherwise.

To open the file in a browser. Navigate to your file then double click on it. It will open in your default Web browser. If it does not, open your browser and drag the file to it.

Explanation of code

You might think what that code was all about. Well, let's find out.

  • The first line <!DOCTYPE html> is the document type declaration. It instructs the web browser that this document is an HTML5 document. It is case-insensitive.
  • The <head> element is a container for the tags that provides information about the document, for example, <title> tag defines the title of the document.
  • The <body> element contains the document's actual content (paragraphs, links, images, tables, and so on) that is rendered in the web browser and displayed to the user.

You will learn about the different HTML elements in detail in the upcoming chapters. For now, just focus on the basic structure of the HTML document.

 

Note: A DOCTYPE declaration appears at the top of a web page before all other elements; however the doctype declaration itself is not an HTML tag. Every HTML document requires a document type declaration to insure that your pages are displayed correctly.

 

 

HTML Tags and Elements

HTML is written in the form of HTML elements consisting of markup tags. These markup tags are the fundamental characteristic of HTML. Every markup tag is composed of a keyword, surrounded by angle brackets, such as <html><head><body><title><p>, and so on.

HTML tags normally come in pairs like <html> and </html>. The first tag in a pair is often called the opening tag (or start tag), and the second tag is called the closing tag (or end tag).

An opening tag and a closing tag are identical, except a slash (/) after the opening angle bracket of the closing tag, to tell the browser that the command has been completed.

In between the start and end tags you can place appropriate contents. For example, a paragraph, which is represented by the p element, would be written as:

Example

<p>This is a paragraph.</p>
<!-- Paragraph with nested element -->
<p>
    This is <b>another</b> paragraph.
</p>

 

HTML Elements

 

HTML Element Syntax

 

An HTML element is an individual component of an HTML document. It represents semantics, or meaning. For example, the title element represents the title of the document.

Most HTML elements are written with a start tag (or opening tag) and an end tag (or closing tag), with content in between. Elements can also contain attributes that defines its additional properties. For example, a paragraph, which is represented by the p element, would be written as:

Note: All elements don't require the end tag or closing tag to be present. These are referred as empty elementsself-closing elements or void elements.

HTML Tags Vs Elements

Technically, an HTML element is the collection of start tag, its attributes, an end tag and everything in between. On the other hand an HTML tag (either opening or closing) is used to mark the start or end of an element, as you can see in the above illustration.

However, in common usage the terms HTML element and HTML tag are interchangeable i.e. a tag is an element is a tag. For simplicity's sake of this website, the terms "tag" and "element" are used to mean the same thing — as it will define something on your web page.

 

Case Insensitivity in HTML Tags and Attributes

In HTML, tag and attribute names are not case-sensitive (but most attribute values are case-sensitive). It means the tag <P>, and the tag <p> defines the same thing in HTML which is a paragraph.

But in XHTML they are case-sensitive and the tag <P> is different from the tag <p>.

Example 

<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>

Nested HTML Elements

When one HTML element is put inside another HTML element, it is called nested HTML elements. Nested HTML elements are widely used these days, while making a web page.

Example is shown below:

 

<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>

 

 Output:

This is italic heading

This is underlined paragraph

 

Empty HTML Elements

When there is no content in between HTML tags it is called Empty HTML element. E.g. <br /> is an empty element, where it is opened and closed without any content in between the tags. Please remember there is a space after br character followed by forward slash (/).

An empty element is an element of HTML that do not have any child nodes. There are actually plenty of them. I’ll just present the popular ones.

<br> — insters a line break
<hr> — inserts a horizontal line
<img> — pretty self-explanatory, used to display images
<input> — well, it’s an input
<link> — defines relationships between the documents
<meta> — changes metadata of your web page
<source> — inserts a media source
 

 

HTML Elements Types

Elements can be placed in two distinct groups: block level and inline level elements. The former make up the document's structure, while the latter dress up the contents of a block.

Also, a block element occupies 100% of the available width and it is rendered with a line break before and after. Whereas, an inline element will take up only as much space as it needs.

The most commonly used block-level elements are <div><p><h1> through <h6><form><ol><ul><li>, and so on. Whereas, the commonly used inline-level elements are <img><a><span><strong><b><em><i><code><input><button>, etc.

You will learn about these elements in detail in upcoming chapters.

 

Note: The block-level elements should not be placed within inline-level elements. For example, the <p> element should not be placed inside the <b> element.