26
CHAPTER – 3 INTRODUCTION TO HTML By :- Pinkesh H. Patel
| Date post: | 14-Dec-2015 |
| Category: |
Documents |
| Upload: | pedro-tant |
| View: | 216 times |
| Download: | 1 times |
CHAPTER – 3 INTRODUCTION TO
HTMLBy :- Pinkesh H. Patel
WHAT IS INTERNET ?
The Internet is a global system of interconnected computer networks that use the standard Internet Protocol Suite (TCP/IP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies.
UNIT-3 INTRODUCTION TO HTML
WHAT IS HTML ?
HTML, which stands for Hypertext Markup Language
HTML is the basic building-blocks of WebPages.
HTML documents are composed entirely of HTML elements that, in their most general form have three components: a pair of tags, a "start tag" and "end tag"; some attributes within the start tag; and finally, any textual and graphical content between the start and end tags, perhaps including other nested elements. The HTML element is everything between and including the start and end tags. Each tag is enclosed in angle brackets.
HTML TAGS :
There are two type of html tags
Paired tag Single tag ( Unpaired tags )
SINGLE TAGS
<DOCTYPE> This unpaired tag is actually the first line of your HTML document. This tag is important because it alerts the browser that is accessing your page that you are using a particular version of HTML. This tag is required in all HTML pages.
Example :- <!DOCTYPE html PUBLIC <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“>"-//W3C//DTD XHTML 1.0 Strict//EN“>
<br>[In XHTML: <br />]
Use line breaks to control the way in which you want the text to appear on the screen.
SINGLE TAGS
<hr>[In XHTML: <hr />]
Horizontal rule, to which attributes can be added, such as:
aligned left, right, and center <hr align="direction">
Adjusted for size <hr size="n">, where n is the size in pixels
Adjusted for width <hr width="w"> where w is the width in pixels or a percentage of the width of the page
Made a solid bar <hr noshade>
SINGLE TAGS
<meta>[In XHTML: <meta />]
The meta tag must be included within the document's header and is used to supply additional information about your document. which is sent out to the remote server by your server, just before it sends out the document. This information is supplied by including one or more of the following attributes.
MAIN TAGS <html> and </html> The opening part of
the html tag should be the second tag used in your document. It alerts a browser to the presence of an html document. The closing html tag should be the last line of your document.
<head></head>The head element is a container for all the head
elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <base>, <link>, <meta>, <script>, <style>, and <title>.
<body></body>The text between <body> and </body> is the
visible page content .It tells that this is the beginning of the page.
PAIRED TAGS <title> and </title> The title tag allows you to place text
across the top of the browser window. The text between the opening and closing tags will be the title of your document. Do not use any special formatting or markup tags in the title of your document.
<p> and </p> Paragraph break. This tag marks the beginning of a paragraph, not the end of one. It instructs the browser to place a blank line after the preceeding paragraph. The closing </p> is typically omitted, and this does not violate the standard.
All text between two <p> tags are considered to be in the same paragraph. The block of text is called an element.
A paragraph break <p> has one attribute which can take three values:
<p align="left"> The default is to be aligned to the left side, so you don't have to use this one.
<p align="center"> will center the paragraph<p align="right"> will place the paragraph on the right margin
PAIRED TAGS <h#> and </h#> This tag defines
the headers in the document, where # is a number from 1 (the largest) to 6 (the smallest). Headers will place an automatic paragraph break after the last of the text, so you don't have to use a <p> in conjunction with this tag.
<h1>Heading1</h1> <h2>Heading2</h2> <h3>Heading3</h3> <h4>Heading4</h4> <h5>Heading5</h5> <h6>Heading6</h6>
PAIRED TAGS
<b> and </b> Bold text, which the user's browser cannot change.
<i> and </i> This tag produces italicized text <big> and </big> This tag will make the
text bigger than surrounding text <small> and </small> This tag will make the
text smaller than surrounding text <strike*> and </strike> Strike out text by
placing a line through it. Note that not all browsers can display this, so be careful about using it
<sub> and </sub> This tag produces subscript
<sup> and </sup> This tag produces superscript
PAIRED TAGS
<u*> and </u> This tag produces underlined text. Since many browsers indicate links with underlined text, you should probably use this sparingly.
CHAPTER 7 FORMATTING BASICS
Generally , text is unformatted in your Web document. You can use some text formatting options like , boldfacing, italic , underline etc.
There are two major classes of text markup.
Character Element Look Element
CHARACTER ELEMENT
The character elements describe the type of the text formatting.
<EM> :- It id used to specify emphasized text within an HTML document.
<STRONG> :- This element indicates text , which should be more forceful than
surrounding text.
<SAMP> : - This element indicates text, which is an example of something.
• <CODE> :- This element indicates text that is the code for a program.
• <ADDRESS> :- This element denotes contact information for the author or
an organization of the web site.• <CITE>:- This element indicates a reference to work, such as a book, report or web site.
• <INS>,<DEL> :- The <DEL> element indicates that the text has been deleted from the current revision of the document. The <INS> element indicates that the text has been inserted into document.
<KBD> :- This element indicates characters that should be typed in at a keyboard. Typically this is used in instruction manual.
<VAR> :- To indicate that a piece of text is a variable, i.e., a notation to be replaced by different actual expression.
<DFN> :- This element can be regarded as a special kind of emphasis. But some browser do not effectively support it.
<PERSON> :- This element is used around names of people mentioned in a document.
<ABBREV> :- This element defines an abbreviation. It is just like normal text, but is used by automatic indexers.
<ACRONYM> :- This element defines an acronym.
<AUTHOR> :- This element defines text names the author of a document.
LOOK ELEMENT
This element use for how the text is to be displayed and not it’s meaning. <B> :- This element defines text that should be
shown in boldface. It can be nested with other element but some browsers will respect only the innermost tag.
<I> :- This element defines text that should be shown in italics. It can be nested with other element but some browsers will respect only the innermost tag.
<U> : This element defines text that should be shown in underneath. It can be nested with other element but some browsers will respect only the innermost tag.
<TT> :- This element defines text that should be shown in a fixed width font. It can be nested with other element but some browsers will respect only the innermost tag.
<STRIKE> <BIG> <SMALL> <SUB> <SUP>
CHAPTER 8 :- SPECIAL CHARACTER
HTML codes use special characters including the left bracket (<), right bracket(>), ampersand (&), and quote(“) to represent certain attribute. Some characters are available on keyboard, but we need to use extended character, which are not found on the keyboard. Two formats can be used to do this.
1. Code number ( character reference ) 2. Phonetic reference ( entity reference )
CODE NUMBER
Character reference are composed of three parts.
A leading ampersand character, (&).The decimal number corresponding to the
character, preceded by a numbers symbol (#xxx).
A terminating semicolon (;).
For example the character reference for less than symbol (<) is <
PHONETIC REFERENCE
Entity reference are similar, but use symbolic names to represent character. Phonetic reference are composed of three parts.
A leading ampersand character, (&).The name of the entity.A terminating semicolon (;).
For example the character reference for less than symbol (<) is <
TARGET LINKS :- ANCHOR TAG
The HTML anchor element is used to create a link to a resource (another web page, a file, etc.) or to a specific place within a web page.
An anchor is a piece of text or some other object (for example an image) which marks the beginning and/or the end of a hypertext link. The <A> element is used to mark that piece of text (or inline image), and to give its hyper textual relationship to other documents. The text between the opening and closing tags, <A attributes> ...text... </A>can be the start or destination (or both) of a link. Here are some simple examples:
ABSOLUTE PATH :-
Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a Web element is also often referred to as the URL. For example, the absolute path to this Web page is:
http://webdesign.about.com/library/weekly/aa040502a.htm
RELATIVE PATH
Relative paths change depending upon what page the links are located on. There are several rules to creating a link using the relative path:
links in the same directory as the page have no path information listedfilename
sub-directories are listed without any preceding slashesweekly/filename
links up one directory are listed as../filename
IMAGE AS HYPERLINK
To make an image into a click-able hyperlink, simply replace the hyperlink text with some HTML image code. Images can have a relative path (/images/sample-image.gif), or they can have an absolute path (http://hyperlinkcode.com/images/sample-image.gif)
AUDIO AND VIDEO IN HTML
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="980" height="171">
<param name="movie" value="images/~27637rrr-menu.swf" />
<embed src="images/~27637rrr-
menu.swf" type="application/x-shockwave-flash" width="980" height="171"></embed>
</object>
