1. Short History Of HTML HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different

1

Course Title: E-COMMERCE

Chapter No: 05“Introduction to HTML”

Course Instructor:ILTAF MEHDI

IT Lecturer, MIHE, Kart-i Parwan branch, Kabul

Introduction to

HTML

2

Short History Of HTML

• HTML was invented in 1990 by a scientist called Tim Berners-Lee.

• The purpose was to make it easier for scientists at different universities to gain access to each other's research documents.

• The project became a bigger success than Tim Berners-Lee had ever imagined.

• By inventing HTML he laid the foundation for the web as we know it today.

3

What is HTML?

• HTML is a language, which makes it possible to present information on the Internet.

• What you see when you view a page on the Internet is your browser's interpretation of HTML.

• If you want to make websites, there is no way around HTML.

4

what does H-T-M-L stand for?

• HTML is an abbreviation of "Hyper Text Mark-up Language”.

• Hyper is the opposite of linear. computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on.

• But HTML is different - you can go wherever you want and whenever you want.

• For example, it is not necessary to visit MSN.com before you visit google.com.

5

what does H-T-M-L stand for?

• Text is self-explanatory.• Mark-up is what you do with the text. You are

marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.

• Language is what HTML is. It uses many English words.

6

Elements and tags

• Elements give structure to a HTML document and tells the browser how you want your website to be presented.

• Generally elements consists of a start tag, some content, and an end tag.

• HTML is all about elements.

7

Elements and tags

8

Tags

• Tags are labels (codes or instructions) you use to mark up the beginning and end of an element.

All tags have the same format: • they begin with a less-than sign (open angle

bracket) "<" and end with a greater-than sign ( closed angel bracket) ">".

9

Kinds of Tags

• There are two kinds of tags :-• opening tags: <html> and closing tags:

</html>.• The only difference between an opening tag

and a closing tag is the forward slash "/".• You label content by putting it between an

opening tag and a closing tag.• To learn HTML is to learn and use different tags.

10

Paired and un-paired tags1. Paired Tags:• There's an exception to every rule and in HTML

the exception is that there are a few elements which both open and close in the same tag.

2. Un-Paired Tags (Singular Tags):• These so-called empty elements are not

connected to a specific way in the text but rather are isolated labels, for example, a line break which looks like this: <br />.

11

Tags: uppercase or lowercase

• Most browsers might not care if you type your tags in upper, lower or mixed cases.

• <HTML>, <html> or <HtMl> will normally give the same result.

• However, the correct way is to type tags in lowercase.

• So get into the habit of writing your tags in lowercase.

12

Nested HTML (tags) Elements

• Most HTML elements can be nested (can contain other HTML (tags) elements).

• HTML documents consist of nested HTML elements (tags). i.e

<u><i>MIHE</i></u>

13

Attribute• In some elements you can add more information. Such

additional information is called an attribute.• Attributes are written immediately after the tags, separated

by a space. • Attributes are instructions that clarify or modify an element.

<h2 bgcolor=“pink”>Welcome to HTML world</h2> <img src="bird.jpg" alt="photo of bird">

• Attributes are always written within a start tag and are followed by an equals sign and the attribute details (value) written between inverted commas.

14

Attribute• You will often use attributes in tags such as the body

tag while you will rarely use attributes in, for example, a br tag since a line break normally is a line break without any parameters to adjust.

• Just as there are many different elements, so there are many different attributes.

• Some attributes are tailor made for one particular element while others can be used for many different element.

• And vice versa: some elements can only contain one kind of attribute while others can contain many.

15

Editing HTML

• HTML can be written and edited using many different editors like Dreamweaver and Visual Studio.

• However, we will use a plain text editor (like Notepad) to edit HTML.

• We believe using a plain text editor is the best way to learn HTML.

16

Basic structure of an HTML document

An HTML document has two main parts:1. Head• The head element contains title of a web

document.2. body • The body element contains the information

that you want to display on a web page.

http://www.scriptingmaster.com/html/HTML-elements.asp

17

Document Head

• Information placed in this section is essential to the inner working of the document and has nothing to do with the content of the document.

• With the exception of information contained with in the <TITLE>...</TITLE> tags, all information placed within the <HEAD>...</HEAD> tags is not displayed in the browser.

18

Document Head

• The HTML tags used to indicate the start and end of the head section are:<HEAD><TITLE>.................</TITLE></HEAD>

• A web page could have a title that describes what the page is about. This can achieved by using the title tag.

• Text included between the title tags shows up in the title bar of the browser window.

19

Document Body• The body element comes after the head and

contains everything that we want to show up in the browser window.

• The tag used to indicate the start and end of the main body of textual information are:<BODY>..........</BODY>

Attribute DescriptionBGCOLOR Changes the backgroud color.

BACKGROUND Paste any image on the background of the document.

TEXT Changes the body text color.

FONT SIZE Adjust the font size.

20

The following illustration provides a summary.

21

THE END

Documents

1. Short History Of HTML HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different