HTML Hypertext Mark-Up Language (HTML) Is The Main Markup

INTRODUCTION OF HTML
RAJAN DHINGRA
HTML INTRODUCTION Hypertext Mark-up Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser. HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <image>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts in languages such as JavaScript which affect the behaviour of HTML WebPages. HTML was originally intended to be used for encoding document structures. While there are now many formatting and formatting-like tags, there are also numerous tags that apply to text structures like headings, paragraphs and tables.
The Hyper Text Mark-up Language (HTML) is an SGML application for marking up documents for inclusion in the World Wide Web. HTML allows you to:
Page 1
RAJAN DHINGRA
Publish documents to the Internet in a platform independent format Create links to related works from your document Include graphics and multimedia data with your document Link to non-World Wide Web information resources on the Internet.
Explain the following terms:

A) HYPERTEXT
Hypertext is text displayed on a computer or other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click, key press sequence or by touching the screen. Apart from running text, hypertext may contain tables, images and other presentational devices. Hypertext is the underlying concept defining the structure of the World Wide Web. It is an easy-to-use and flexible format to share information over the Internet. "Hypertext is a way to link and access information of various kinds as a web of nodes in which the user can browse at will. Potentially, Hypertext provides a single user-interface to many large classes of stored information such as reports, notes, data-bases, computer documentation and on-line systems help. We propose the implementation of a simple scheme to incorporate several different servers of machine-stored information already available at CERN, including an analysis of the requirements for information access needs by experiments...A program which provides access to the hypertext world we call a browser.
B) HYPER
MEDIA
Hypermedia is used as a logical extension of the term hypertext in which graphics, audio, video, plain text and hyperlinks intertwine to create a generally non-linear medium of information. This contrasts
Page 2
RAJAN DHINGRA
with the broader term multimedia, which may be used to describe non-interactive linear presentations as well as hypermedia. It is also related to the field of electronic literature. The World Wide Web is a classic example of hypermedia. C) WEB CLIENT A Web client is actually your browser. It is the browser on your PC/Mac that makes the requests to the remote server. A PC/Mac that uses a web (Client) browser is referred to as a Client Machine. A Client and a Server are two parts of a connection. In a web environment, these are two distinct machines, A Client is any machine that requests information, the Server is who the client makes the request too.
D) WEB SERVER So a Web Server is basically a PC that is designed to accept requests from remote computers and send on the information requested. It can refer to either the hardware (the computer) or the software (the computer application) that helps to deliver Web content that can be accessed through the Internet. The most common use of web servers is to host websites, but there are other uses such as gaming , data storage or running enterprise applications.
E) URL A Uniform Resource Locator (URL) is used to address a document (or other data) on the World Wide Web. A URL can be composed of words, such as "w3schools.com", or an Internet Protocol (IP) address: 192.68.20.50. Most people enter the
Page 3
RAJAN DHINGRA
name of the website when surfing, because names are easier to remember than numbers. When you click on a link in an HTML page, an underlying <a> tag points to an address on the World Wide Web. F) ABSOLUTE PATH Alternatively referred to as the file path and full path, the absolute path is a path that contains the root directory and all other sub directories that contain a file or folder. For example:Windows absolute path C:\Windows\calc.exe Image Absolute path: C:\My Picture\images\image123.gif Absolute path always begin with a / (slash). It is a complete "road map" file location. G) RELATIVE PATH Relative path do not begin with /. Its specifies location relative to your current working directory and it can be used as a shorter way to specify a file name. A relative path describes the location of a file in relation to another file on the same current Directory .The starting point is the location of the document with the path. The path may appear as: Images/image123.gif Or
Page 4
RAJAN DHINGRA
H) HTML TOOLS These tools offer useful information on certain aspects of HTML.
HTML Entity Chart
This chart shows you the special characters in the Latinise character set, and how to access them using html entities in your code. This tool will calculate the closest color in the 216 color web-safe palette to the hex colour that you specify.
Web safe Colour Tool FrontPage Cleaner Dreamweaver Cleaner
Code This tool will clean a lot of the un-needed code created my microsoftfrontpage from a web page you specify. Code As above, this tool will help to clean up the code produced by macromedia dreamweaver. This tool will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.
CSS Menu Generator
I)Tag A command inserted in a document that specifies how the document, or a portion of the document, should be formatted. Tags are used by all format specifications that store documents as text files. This includes SGML and HTML. j) Attributes Web page customization begins with HTML attributes. Attributes are like blue print schematics informing the browser how to render an HTML element. As an HTML tag is processed, the web browser looks to these attributes as guides for the construction of web elements. Without any attribute values specified, the browser will render the element using the default setting(s) (usually very boring). HTML attributes are responsible for customizing web elements. As a web surfer, you've probably seen a vast assortment of color schemes, fonts, and styles -- all of which are brought to you by HTML and CSS element attributes.
HTML elements can have attributes

Page 5

RAJAN DHINGRA
Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"
Attribute Example HTML links are defined with the <a> tag. The link address is specified in the href attribute: Example <a href="http://www.w3schools.com">This is a link</a> k) document type definition A Document Type Definition (DTD) defines the legal building blocks of an XML document. It defines the document structure with a list of legal elements and attributes.A DTD can be declared inline inside an XML document, or as an external reference. Internal DTD Declaration If the DTD is declared inside the XML file, it should be wrapped in a DOCTYPE definition with the following syntax: <!DOCTYPE root-element [element-declarations]> External DTD Declaration If the DTD is declared in an external file, it should be wrapped in a DOCTYPE definition with the following syntax: <!DOCTYPE root-element SYSTEM "filename"> EXPLAIN THE FOLLOWING TABS :1) <DOCTYPE> The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
Page 6
RAJAN DHINGRA
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly. <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> 2) <HTML> The <html> tag tells the browser that this is an HTML document.The <html> element is also known as the root element.The <html> tag is the container for all other HTML elements (except for the<!DOCTYPE> tag). <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html> 3) <HEAD> The <head> element is a container for all the head elements. The <head> element must include a title for the document, and can include scripts, styles, meta information, and more. Example A simple HTML document, with the minimum of required tags: <html> <head> <title>Title of the document</title>
Page 7
RAJAN DHINGRA
</head> 4) The tag defines a paragraph. Browsers automatically add some space (margin) before and after each element. The margins can be modified with CSS (with the margin properties). Example A paragraph is marked up as follows: This is some text in a paragraph. 
5) <pre> Definition and Usage The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
Example Preformatted text: <pre> Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks </pre>
Page 8
RAJAN DHINGRA
6) <body> The <body>tag defines the document's body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Example A simple HTML document, with the minimum of required tags: <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> 7) and The tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O. The tag defines superscript text. Superscript text appears half a character above the baseline. Superscript text can be used for footnotes, like WWW[1].
Example Subscript and superscript text: This text contains subscript text. 8) <title>
Page 9
RAJAN DHINGRA
The <title> tag is required in all HTML documents and it defines the title of the document.The <title> element:

defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results Example Define a title for your HTML document: <html> <head> <title>HTML 4.01 Tag Reference</title> </head> <body>The </body> content of the document......
9) The strong tag is another phrase element. It make text bold in most browsers.You may wonder why there is a (bold) tag and also a tag since both are displayed in bold type. To make text bold on a web page is as easy as it gets. your bolded text
10 ) The em tag is used to add emphasis to a word or phrase. The emphasized text is rendered in italics in most browsers. You may wonder why there is an and an tag since both are displayed in italics. Technically, the emphasis tag was meant to provide emphasis aurally for people surfing using screen readers, while the italics tag was meant to provide emphasis visually. example of usage: Emphasized text 11) <cite>
Page 10
RAJAN DHINGRA
The citation tag allows you to cite sources and references. It's rendered in italic text in most browsers, but the style can be changes using CSS. Using a citation like this :<cite>cited text</cite> 12) 
The tag inserts a single line break. The tag is an empty tag which means that it has no end tag. 13) 
The element is deprecated in HTML 4.01. The tag specifies the font face, font size, and font color of text. Example Specify the font size, font face and color of text: This is some text! This is some text! This is some text! 14) <marquee>
The 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. Eg. <marquee> text </marquee> What Is List.? What Are Its Types In Html ? Advantages And Disadvantages. Explaion Its Tags And Attributes.
HTML lists appear in web browsers as bulleted lines of text. There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers), and definition lists (think: dictionaries). Each list type utilizes its own unique list tag.
Page 11
RAJAN DHINGRA
HTML List Types

a) Unordered or Bullet List (<UL><LI></UL> with <LI> before each item): <UL>

<LI> This is a LIST ITEM</LI> <LI> So Is This with no ending TAG This is INSIDE the UL
The </UL> is just to the left of this. So, this list puts LF's before & after the body of the list.
b) Compact Unordered or Bullet List (<UL COMPACT><LI></UL> with <LI> before each item): <UL COMPACT TYPE=DISC>
o
<LI>this is a LIST ITEM with a DISC Bullet. </LI> <LI TYPE=CIRCLE> This is a List Item with a CIRCLE Bullet & it has no ending TAG <LI TYPE=SQUARE>this is a List Item with a SQUARE Bullet & it has no ending TAG this is INSIDE the UL.
The </UL> is just to the left of this. From what I can tell, version 4.x browsers don't recognize COMPACT.
o
Unordered or Bullet List With List Header Tag(<UL><LH><LI></UL>

<UL> <LH>this is the List Header Line and it ends with a Tag

with <LI> before each item):
<LI> This is a LIST ITEM</LI> <LI> So Is This with no ending TAG This is INSIDE the UL
The </UL> is just before this. HTML 3 has a <LH>tag as shown here, but it does nothing, at least w/ Nave 4.5 and Page Mill 3 doesnt recognize it
Ordered or Numbered List (<OL><LI></OL> with <LI> before each item): <OL TYPE=I START=5> 1. <LI> This is a LIST ITEM</LI>
Page 12
RAJAN DHINGRA
2. <LI> So Is This with no ending TAG 3. <LI TYPE=1> This is a LIST ITEM with a different Numbering Type</LI> 4. <LI>this, too, is a LIST ITEM. Other Type Args are "A", "a", & "i".</LI> This is INSIDE the OL The </OL> is just to the left of this. After the line with the TYPE changed to "1", Explorer reverts back to the original TYPE. Navigator respects the change for subsequent lines.
o
Definition List (<DL><DT><DD></DL>):
<DL> <DT> this is Definition Term w/no end TAG <DD>and this is its Description w/no end TAG AND an <HR> TAG as a separator <DT> this is another Definition Term</DT> <DD>and this is its Description</DD>this is INSIDE the </DL> The </DL> is just to the left of this. So, this list puts LF's before & after the body of the list.
Menu List (<MENU><LI></MENU> with <LI> before each item) Netscape & IE show this as a paragraph!: <MENU> LI> this is a LIST ITEM</LI> LI> So Is This with no ending TAG LI> this is a LIST ITEM</LI> this is INSIDE the MENU The </MENU> is just to the left of this. MENU & DIR would display the Items in ROWS.
o
Directory List (<DIR><LI></DIR> with <LI> before each item) Netscape & IE show this as a paragraph, too!: <DIR> LI> this is a LIST ITEM</LI> LI> so is this with no ending TAG <LI> this is a LIST ITEM</LI> this is INSIDE the DIR The </DIR> is just to the left of this. Limited to 24 characters.
Advantages
Easy to use
Page 13

RAJAN DHINGRA
Loose syntax (although, being too flexible will not comply with standards) Supported on almost every browser, if not all browsers. Widely used; established on almost every website, if not all websites. Very similar to XML syntax, which is increasingly used for data storage Free - You need not buy any software Easy to learn & code even for novice programmers Disadvantages
It cannot produce dynamic output alone, since it is a static language Sometimes, the structuring of HTML documents is hard to grasp You have to keep up with deprecated tags, and make sure not to use them Deprecated tags appear because another language that works with HTML has replaced the original work of the tag; thus the other language needs to be learned (most of the time, it is CSS) Security features offered by HTML are limited ATTRIBUTES AND TAGS Attributes are another important part of HTML mark-up. An attribute is used to define the characteristics of an element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value:
The name is the property you want to set. For example, the element in the example carries an attribute whose name is face, which you can use to indicate which typeface you want the text to appear in. The value is what you want the value of the property to be. The first example was supposed to use the Arial typeface, so the value of the face attribute is Arial.
Page 14

HTML Hypertext Mark-Up Language (HTML) Is The Main Markup

Uploaded by

Copyright:

Available Formats

HTML Hypertext Mark-Up Language (HTML) Is The Main Markup

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Hypertext Mark-Up Language (HTML) Is The Main Markup

Uploaded by

Copyright:

Available Formats

INTRODUCTION OF HTML

Explain the following terms:

HTML Entity Chart

Web safe Colour Tool FrontPage Cleaner Dreamweaver Cleaner

CSS Menu Generator

HTML elements can have attributes

HTML List Types

Unordered or Bullet List With List Header Tag(<UL><LH><LI></UL>

with <LI> before each item):

Definition List (<DL><DT><DD></DL>):

You might also like