HTML:HTML is a subset of a larger markup language called SGMLHTML stands for HyperText Markup Language. This markup language is used to create web documents. A web document is viewed in a web browser. HTML (HyperText Markup Language) is the language of the World Wide Web. It is a descriptive language that utilizes a limited number of predefined markup tags to describe how a web browser should display a web page.

Defining HTML

Cont..Hyper is the opposite of linear. Old-fashioned

computer programs were necessarily linear - that is, they had a specific order. But with a "hyper" language such as HTML, the user can go anywhere on the web page at any time.

Text is just what you're looking at now - English characters used to make up ordinary words.

Mark-up is what is done to the text to change its appearance. For instance, "marking up" your text with <b> before it and </b> after it will put that text in bold.

Language is just that. HTML is the language that computers read in order to understand web pages

Cont..Browser: A browser is a software application that

allows you to view HTML documents, whether Web pages or HTML files, on your own computer. Two popular browsers are Internet Explorer and Netscape Navigator.

Website A Web site stores information that has

been organized into individual hypermedia documents, Web pages, and holds it on a server for distribution across the Internet.

HypermediaA hypermedia document is a document

with a format that can be displayed online, in a browser. In practice, hypermedia documents are often called HTML files, although they may contain many other types of files.

HTML standards are set and maintained by the World Wide Web Consortium

WWW(World Wide Web) The Web, or World Wide Web, is the area of the

Internet that allow you to display text and graphics and play videos, and movies. With appropriate equipment, we can even receive or broadcast live audio and video.

A set of html pages accessible using HTTP Hyper Text Transfer Protocal- HTTP is the protocol to

exchange or transfer hypertext. Hypertext is structured text that uses logical links (

hyperlinks) between nodes containing text. Hyperlink:

A hyperlink, or link, usually appears as colored, underlined text or a graphic on a Web page. A link is a jumping-off point for moving from one subject to another.

Cont..HTML Web page authors require three basic

tools: Computer with graphics capabilities Text editor Browser software application

Text editor:A text editor is a software application used to create and manipulate text, such as Notepad and WordPad.

HTML editorsText based editorsWYSIWYG editors

Text-based (or code-based) editors

To start creating web pages, we do not need an expensive software package but you do need some knowledge of HTML. We can create web pages with a basic text editor like Windows Notepad.

In Windows, Notepad can be started from the Start Menu:

Select: Programs | Accessories | NotepadMacromedia Homesite is a popular text-

based HTML editor.

WYSIWYG editors

Because WYSIWYG (pronounced wuzzywig or wizzywig) HTML editors do not require much HTML knowledge, they tend to be expensive. These editors allows you to directly work in the "design" or "preview" view instead of the code view.

There are several popular WYSIWYG editors available:

Macromedia DreamweaverMicrosoft FrontPageAdobe GoLive

Text-based (or code-based) editorsBetter control. Because text-based editors

require knowledge of HTML, the developer has more control over what is written to produce a web page. In some cases, a software package (like FrontPage) may write proprietary code that may not be interpreted by all the brwosers.

Faster editing. we can quickly change your code unlike WYSIWYG editors. WYSIWYG editors require, for example, a lot of computer-resources to start-up or load/open a page.

More flexibility. we can edit your code directly at the desired location. This cannot be always done with WYSIWYG editors.

WYSIWYG editors

Support for other scripting languages. WYSIWYG editors provide advanced features to code in other programming/scripting languages such as JavaScript, XHTML, ASP/ASP.NET, PHP, and JSP.

Faster/simplified development. WYSIWYG editors allows you to develop pages quickly as the software writes the necessary code in response to the layout you design for your web page.

Better organization. Dreamweaver, for instance, allows you to define a site folder that contains all the files that make up the website. By defining a local site folder, you have many advantages including moving of files (without breaking links), searching of a particular term or tag in the entire site (without having the file open!), and FTP support to move only changed or new files to the server.

Creating an HTML document

An HTML document has two elements:Document ContentTags

Document content is the information on a web page that the user will see. That information could be text or graphics, for example. As you start creating your own web pages, try finding out first what information you want to display and how you want to present it.

Tags are the HTML codes that control how the document content will appear. The tags, in other words, will determine whether the text will be bold, black or blue, or of font type Time New Roman or Airal

Naming conventionsHTML files names are very important as

they are used to locate or open the files.1. Save your web page files with the .htm

or .html file extension. 2. Some web servers are case-sensitive. 3. Filenames should consists only of letters

and numbers. Avoid using spaces, punctuation, or special characters.

Basic structure of an HTML document

An HTML document has two main parts:head. The head element contains title and

meta data of a web document.body. The body element contains the

information that we want to display on a web page.

Understanding elements

To markup your web pages, we will need to learn the syntax (rules of a computing language) of HTML. the syntax only controls the presentation or structure of a web page.

The most fundamental piece of building block of HTML is the elements.

In HTML, an element refers to two different things:

1. element of structure of a document (for example, paragraph, web page title, etc.).

2. element in the sense of a tag (for example, <p>, <title>)

Cont..TagStart TagAn End TagEmpty Tags(no Content)One-sided Tags. Two-sided Tag.

Cont.. Every element has a name such as head, title, p, i, and b. A tag is the element name surrounded by the angled brackets.

This refers to a start tag such as <p>, <title>, and <i>. A start tag starts a particular HTML instruction. An end tag is the same as a start tag except the end tag has a

forward slash between the < and the element name. An end tag stops a particular HTML instruction.

Most elements have content, which is placed between the start and the end tags. Example, this is <b>bold</b>.

Some elements have no content. Such elements/tags are known as empty tags.

Some elements have no end tags. These are referred to as one-sided tags.

A tag that has an opening and closing tag is referred to as two-sided tag.

Understanding attributes

In HTML, elements (or tags) have attributes or properties. As an HTML writer, attributes allow you to add extra instruction to your tags.

An attribute has two parts: attribute name and attribute value. . Ex: align="right”

commentsIn HTML, a comment begins with <!-- and

ends with -->.Example of a single line comment:<!--This is a small comment--> Example of a multi-line comment:<!--This comment is long. It is displayed on

more than one line. Adding multi-line comments in HTML is easy as adding a single line comment. Whether the comment is single line or multi-line, it starts with <-- and ends with -->-->.

Spacing and breaks

breaks between tagsspacing between tagsSpacing inside the bracketsAvoiding unnecessary space in HTML code

breaks between tags

spacing between tags

Avoiding unnecessary space in HTML codeThere are two areas where the use of space should be avoided:

1. space between the tag name and brackets

2. space between the tag name and the text it affects

Space between the tag name and brackets

 

Space between the tag name and the text it affects

Creating a paragraph

In HTML, creating a paragraph is simple as entering text. To create a paragraph, move the cursor to the location where you want the paragraph in the HTML editor you are using. Next, type the <p> tag to begin the paragraph.

close the <p> tag with </p>. Closing the tag instructs the browser that the paragraph has ended.

Attributes:Align=left, right, center,justify

Example..<html> <head> <title>Paragraph example</title> </head> <body> <p align=“left”>ONE</p> <p align=“center”>TWO</p> <p align=“right”>THREE</p> <p align="justify">This paragraph uses the

justify alignment. The paragraph is justified: the text continues to both margins.</p>

</body> </html>

example<html>

<title>How To Create Paragraph</title><body><p>To learn HTML and other web programming languages, come to ScriptingMaster.com regularly. The web site is updated daily with new content. The web site is succeeding because visitors like you keep coming back and find the site simple to use, easy to understand, and resourceful.</p></body></html>

Creating headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest

HTML automatically adds an extra blank line before and after a heading.

Line breaks

To add a line break in a web page, you can use the <br> tag. Typing a <br> tag in your HTML code is similar to pressing the ENTER or RETURN key in a word processor.

The effect of <br> tag is that the browser stops printing text on that line and drops down to the next line on that page.

The <br> tag does not require a closing tag.

example

Preformat text

With the <pre> tag, the text renders in the browser exactly as you type it. The <pre> tag is short for preformat. So if you press the ENTER or RETURN key several times to create line breaks within a <pre> tag, you can expect to see all those line breaks in a browser.

The following shows the <pre> tag in use:Syntax:<pre> -------- --------</pre>

Cont..

Horizontal rules

To break up an HTML document into separate sections, you can insert a horizontal line (rule). A horizontal rule is inserted by the <hr> tag. The <hr> tag is one-sided, meaning it does not require a closing tag.

Inserting horizontal lines<hr>

Cont..Horizontal rule of size 12:<hr size="12" />Horizontal rule of size 12 and width 20%:<hr size="12" width="60%" />Horizontal rule of size 12, width 60%, and

aligned left:<hr size="12" width="60%"

align="left" />

Output is…

Divisions (with the <div> tag)

To structure HTML documents into divisions or sections, the <div> tag is used.

The <div> tag specifies a logical block without predefined meaning or rendering infomration. Orginally, the tag was mostly used to align sections of content in a document with the align attribute.

example:<div align="right">

<h4>Division heading</h4><p>Paragraph 1. This text is right-aligned. The div affects paragraph and other block elements.</p><p>Paragraph 2. This text is also right-aligned.</p></div>

Output…Division headingParagraph 1. This text is right-aligned. The

div affects paragraph and other block elements.

Paragraph 2. This text is also right-aligned.

HTML Links HTML uses the <a> anchor tag to create a

link to another document or web page. 1. The Anchor Tag and the Href Attribute 2. The Target Attribute3. Email Links 4. The Anchor Tag and the Name Attribute

The Anchor Tag and the Href Attribute

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor: <a href="url">Text to be displayed</a> The <a> tag is used to create an anchor to

link from, the href attribute is used to tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

The Target Attribute

With the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window:

<a href=“http://www.google.com” target="_blank">Visit </a>

Email Links

To create an email link, you will use mailto: plus your email address.

<a href="mailto:helpdesk@vce.edu">Email Help Desk</a>

To add a subject for the email message, we would add ?subject= after the email address.

For example: <a href="mailto:helpdesk@vce.edu?

subject=Email Assistance">Email Help Desk</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly to a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Unlike an anchor that uses href, a named anchor doesn't change the appearance of the text

syntax of a named anchor: <a name="top">Text to be

displayed</a>

HTML Images The Image Tag and the Src AttributeThe Alt Attribute Image Dimensions

The Image Tag and the Src Attribute

The <img> tag is empty, which means that it contains attributes only and it has no closing tag.

To display an image on a page, you need to use the src attribute. src stands for "source".

The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image: <img src="graphics/chef.gif">

The Alt Attribute

The alt attribute is used to define an alternate text for an image.

The value of the alt attribute is author-defined text:

<img src="graphics/chef.gif" alt="Smiling Happy abc">

The alt attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.

Image Dimensions

When you have an image, the browser usually figures out how big the image is all by itself. If you put in the image dimensions in pixels however, the browser simply reserves a space for the image, then

loads the rest of the page. Once the entire page is loads it can go back and fill in the images. Without dimensions, when it runs into an image, the browser has to pause loading the page, load the image, then continue loading the page. The chef image would then be:

<img src="graphics/chef.gif" width="130" height="101" alt="Smiling Happy Chef">

HTML ColorsColor Values Colors are defined using a hexadecimal

notation for the combination of red, green, and blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

This table shows the result of combining red, green, and blue:

Color Names

A collection of color names is supported by most browsers.

Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow)

Cont..

HTML Backgrounds The <body> tag has two attributes where

you can specify backgrounds. The background can be a color or an image.

1. Bgcolor 2. Background

Bgcolor

The bgcolor attribute specifies a background-color for an HTML page.

The value of this attribute can be a hexadecimal number, an RGB value, or a color name:

<body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> The lines above all set the background-

color to black.

Background

The background attribute can also specify a background-image for an HTML page.

The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.

<body background="clouds.gif">

Character tags:A tag that is applied to an individual

character is known as a character tag. A character tag can be grouped into two

categories: physical and logical. (Note: physical styles are associated with physical character tags; logical styles are associated with logical character tags.)

1.Physical stylesa physical character tag controls how the

characters are formatted

2. Logical stylesA logical character tag describes how

the text is being used, not necessarily how it is formatted.

Font tagThe <font> tag provides limited control

over changing the appearance of the text. The <font> tag in HTML is deprecated. The World Wide Web Consortium (W3C)

has removed the <font> tag from its recommendations.

In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.

The <font> Tag Should NOT be used.

Cont..

Attributes:size,color,face1. Size:size of our text with number value 1-

7 only2. Color:font color,values are

rgb,name,hexadecimal3. Face:name of the font,font typeEx:<font size=“5” color=“red” face=“arial”>This is font example </font>

HTML Character Entities A character entity has three parts: 1. an ampersand (&),2. an entity name or an entity number, 3. and finally a semicolon (;). The & means we are beginning a special

character, the ; means ending a special character

and the letters in between are sort of an ab.breviation for what it's for

Entities are case sensitive

Cont..

Non-breaking Space The most common character entity in HTML

is the non-breaking space &nbsp;. Normally HTML will truncate spaces in your

text. If you add 10 spaces in your text, HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity.

Example..

Marquee TagThe HTML <marquee> tag is used for

scrolling piece of text or image displayed either horizontally across or vertically down your web site page depending on the settings.

Syntax:<marquee>This is basic example of

marquee</marquee>

HTML listsLists are very important to any document

as they allow you to make your key points stand out from the rest of the text. HTML supports three lists:

1. Unordered (Bulleted) 2. Ordered (Numbered)3. Definition

1.Unordered (bulleted) listThe most commonly used list is the

unordered list. An unordered list can be used whenever

the order of items you want to list is unimportant.

HTML offers three different default characters to use with an unordered list:

1. a bullet ( ), 2. a circle ( ), 3. a square ( ).

Basic syntax

<UL><LI> list item 1</LI><LI> list item 2</LI>...</UL>

Example:<UL><LI> milk </LI>

<LI> bread </LI>

<LI> apples. </LI>

</UL>

Possible attributes1.compact:specifies that the list should render smaller

than normal2.type:Specifies the kind of marker to use in the list.possible values are disc,square and circle.

2.Ordered (numbered) list

The other popular kind of list is the ordered list. This type of list can be used when the order of items to list is important.

An ordered list can be created with different styles:

Arabic numbers, lowercase or uppercase letters, or lowercase or uppercase Roman numerals.

Syntax:<OL>

<LI> list item 1<LI> list item 2...</OL>

Attributes:

The meanings of the values of TYPE are the following:

example

3.Definition listThe definition list is used far less

frequently than the other two kinds of lists mentioned above.

A definition list, as the name implies, is used for listing definitions:

Basic syntax<DL>

<DT>term 1<DD>definition of term 1<DT>term 2<DD>definition of term 2...</DL>

Possible attributes

Nested listLists can be nested, meaning one list can be placed inside of

another.Example:<ol> <li>Chapter One

<ol> <li>Section One</li> <li>Section Two </li>

<li>Section Three </li> </ol>

</li> <li>Chapter Two</li> <li>Chapter Three</li> </ol>