HTML

History:

· The first version of HTML was created using the Standard Generalized Mark up Language (SGML).

· In the early years of HTML, Web developers were free to define and modify HTML in whatever ways they thought best.

· Competing browsers introduced some differences in the language. The changes were called extensions.

· A group of Web developers, programmers, and authors called the World Wide Web Consortium, or the WC3, created a set of standards or specifications that all browser manufacturers were to follow.

· The WC3has no enforcement power.

· The recommendations of the WC3are usually followed since a uniform approach to Web page creation is beneficial to everyone.

Comparison of HTML versions:

HTML Basics:

HTML is primarily composed of two types of markup:

• Elements or tags

o <html></html>

• Attributes that modify an element

HTML Elements

• Elements are the fundamental building blocks of HTML.

• They are the tags that tell the browser what the enclosed text is.

HTML Tags:

• Container Tags

o <Begin formatting>some text</End formatting> o For example: some bold text

<H1>some heading </H1>

• Empty Element Tags

o For example <HR>

• Comment Tag

o

o Use them document complicated layouts!

• Case insensitive

• Unrecognised tags are simply ignored by browser!!

• Container tags must be nested!!

• As a text document, your HTML in Notepad will contain elements, such as headers, titles, paragraphs, etc.

• These elements must be denoted in your script, which is done using tags

• HTML tags consist of a left angle bracket (<), a name, and a right angle bracket(>)

• For example: <title>

• Tags must also close. To do so, you incorporate a slash (/). A starting and ending tag would be: <title> </title>.

Attributes:

• You can add attributes to tags to enhance your page.

• Added attributes go inside the brackets of the opening tag(example: would center the paragraph)

About HTML file Structure:

· HTML files .htm or .html extensions

· Name your files to describe their functionality file name of your home page should be index.html

Common Tags (Elements):

· Always include the <HTML>…</HTML> tags

· Comments placed inside  tags

· HTML documents

o HEAD section.

o Info about the document.

o Info in header not generally rendered in display window. o TITLE element names your Web page.

o BODY section

Page content

Includes text, images, links, forms, etc.

Elements include backgrounds, link colors and font faces P element forms a paragraph, blank line before and after

Structure of HTML Tag (Element) Alignment

Text Styling

• Underline style…

• Align elements with ALIGN attributeright, left or center

• Close nested tags in the reverse order from which they were opened

• Emphasis (italics) style…

• Strong (bold) style…

• and tags deprecated Overstep boundary between content and presentation

• Logical Styles:

o , a add emphasis to text

o <BIG>, a increase or decrease text size o , a subscript or superscript

• Physical styles:

o , , a Bold, Italics, and Underline text

o o E.g.,

eXtensible Mark up Language (XHTML) :

• To describe the general form and layout of documents

• An XHTML document is a mix of content and controls

• In XHTML tag names, attributes, and values are case sensitive and values must be enclosed by double quotes.

• In XHTML all elements must have both beginning and ending tags.

• Controls are tags and their attributes

o Tags often delimit content and specify something about how the content o should be arranged in the document.

o Attributes provide additional information about the content of a tag.

• Tools for creating XHTML documents

o XHTML editors - make document creation easier o Shortcuts to typing tag names, spell-checker,

o WYSIWYG XHTML editors

• Plug ins

o Integrated into tools like word processors,

o effectively converting them to WYSIWYG o XHTML editors

• Filters

o Convert documents in other formats to XHTML

Advantages of both filters and plug-ins:

• Existing documents produced with other tools

• can be converted to XHTML documents

• Use a tool you already know to produce XHTML

Disadvantages of both filters and plug-ins:

• XHTML output of both is not perfect - must be fine tuned

• XHTML may be non-standard

• You have two versions of the document, which are difficult to synchronize

Relative URL

HTML Link:

To create a link to a resource identifiable by a URL o href: specify a URL of the target resource

o target: specify where to display the target document

e.g.: <a href="index.htm" target="_blank">Home</a> Open the document "index.htm" in a new browser window

Can also be used to create an anchor within a document o name: specify the anchor name

e.g.: <a name="chap1"></a><h2>Chapter 1</h2> The above anchor can be referred to in a URL as

<a href="http://host/file.html#chap1">Chapter 1</a>

URL (Uniform Resource Locator) in HTML:

URL is used to create a link in a web document.

Two Types of URL:

1. Absolute URL

• Absolute URL contains all the information necessary to identify files on the internet (Example: in postal service, for sending letter to the destination it necessary to have full information like, name, address, city etc.,)

• Likewise, an absolute URL contains the protocol, hostname, filename, which are all essential to link the web document.