Sagar Html Notes

  • June 2020
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Sagar Html Notes as PDF for free.

More details

  • Words: 13,508
  • Pages: 69
Introduction to HTML What is HTML? HTML is a language made for creating the web pages for the websites. By using HTML language the even a child can make his web pages or even his own website so why not you. Here are some facts about the HTML language: Why do Need HTML As the HTML is a very easy language for creating the web pages. It can be learned in few hours or in few days. It is the basic format of the HTML file it can be displayed on mostly operating system which supports the web browser.

Basics of HTML What is an HTML File? · · · ·

HTML stands for Hyper Text Markup Language. An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. An HTML file must have an htm or html file extension.

An HTML file can be created using any simple text editor like "Notepad" of the Microsoft Windows. First of all let me explain the above web page and how it is created, how easily it can be created. It is very easy to insert the element in the HTML pages simply by writing their tags and provide their attribute. Basic Description of HTML File The HTML file can be divided into the three parts: HTML Header HTML Body HTML Footer So let us see the Body of the HTML File:

HTML Header is the top most part of the HTML file in this section of the file we define the header of file and also Title of the file can be provided. HTML Body is the middle part of file, in this section we define all text and elements which is to displayed on web page. HTML Footer is the end section of the file. How To Write a HTML File To write a HTML file you need an text editor, open the text editor and start writing file as given below: Steps to write a file & view the web page: · Open the text editor (e.g. notepad). · Write the above file in it OR copy the above file and paste it on the notepad. · Save this file as .htm or .html file extension (e.g. .htm , .html). · Now open the Internet Browser and open the saved file. · Now you can see your web page.

The file starts from an tag and ends with the . tag identifies that it is an HTML file. is also called as open tag and it also need its closed tag which is . Between these tags we will define the Header of the file, so add the tag and below it write to close tag. More to display the Title to the Web Browser use the special tag write here title . Text written between the & tag will be displayed as the header of the your web page. The important tag is tag. Whatever you want to display on the web page you must write it in between & .

Basic HTML Tags The most important tags in HTML are tags that define headings, paragraphs, body and line breaks. The basic HTML Tags are described here in the form of table so that you can remind them easily. Basic HTML Tags Tag

Description



Defines an HTML document



Defines information about the document

<br /> <br /> Defines the document title<br /> <br /> <body><br /> <br /> Defines the document's body<br /> <br /> <h1> to <h6><br /> <br /> Defines header 1 to header 6<br /> <br /> <p><br /> <br /> Defines a paragraph<br /> <br /> <br><br /> <br /> Inserts a single line break<br /> <br /> <hr><br /> <br /> Defines a horizontal rule<br /> <br /> <!--><br /> <br /> Defines a comment<br /> <br /> Description Of The Above Tags <html>tag This element tells a browser that this is an HTML document. This tag is defined at the top of the HTML file and at the end of file. Format: <html> <body>..............body of HTML.............</body></html> Example: <html> <body> this is my first page </body></html> <head> tag The head tag defines information about the document. The browser does not display the "head information" to the user. The following tags can be in the head section: <base>, <link>, <meta>, <script>, <style>, and <title>. The head tag is used between <html> and <body> tags. Format: <html> <head>.....head sections....</head><body>......body of HTML........</body></html><br /> <br /> Example: <html> <head><title>Basic tag this is my first page tag Title tag defines the title of the document which appears in the Title bar of the explorer window. Title tag is used in between <head> and </head> tag. because it is title tag is section of <head> tag. Format: <html> <head><title>Title of the Page</head><body>.....body of HTML......</body></html> Example: <html> <head><title>Basic tag this is my first page tag The body element defines the documents' body. It contains all the contents of the document (like text, images, colors, graphics etc). Format: Example: Attributes Attribute

Value

Description

background

file_name

An image to use as the background. Deprecated. Use styles instead.

bgcolor

color_name

The background color of the document. Deprecated. Use styles instead.

link, alink, vlink

color_name

Specifies the color of all the links in the document. Deprecated. Use styles instead.

text

color_name

Specifies the color of the text in the document. Deprecated. Use styles instead.

... Heading Tags These tags are used to display headings in an HTML document. through these tags you can increase the size of the text. In these tags

tag defines the largest header &

defines smallest. These tags are

,

,

,

,
Format: .............. text.............. Example:

this is my first page

or

text

Attribute of the Tag.

Attribute of the Tag It has only one attribute i.e. Align="value" values may be right, left, center and justified. you can use this align attribute in many tags to align the text or elements. It has only one attribute i.e. Align="value" values may be right, left, center and justified. you can use this align attribute in many tags to align the text or elements. align value (right, center, left, justified)

.....

Paragraph Tag This tag is used for creating the paragraph in the web page. It is used inside the body of file. Format:

......longtext..........

Example:

This is the test of paragraph tag........

In this tag align attribute can be used.
tag The
tag inserts a single line break. Use the
tag to enter blank lines, not to separate paragraphs. This tag has no end tag. Format: text........
.....text Example: this is a break
in the line.
tag The
tag inserts a horizontal rule. The
tag has no end tag. Format: text......
......text or text......
.... text Example: this is the test of the hr
tag
Attribute Attribute

Value

Description

align

right,left,center The alignment of the horizontal rule.

size

% , pixels

The thickness (height) of the horizontal rule.

width

% , pixels

The width of the horizontal rule.

Comment Tag The comment tag is used to insert a comment in the source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. You can also store program-specific information inside comments. In this case they will not be visible for the user, but they are still available to the program. A good practice is to comment the text inside the script and style elements to prevent older browsers, that do not support scripting or styles, from showing it as plain

text. Format: Example: You might have became bored of reading so lets do some practical. Follow these Steps: copy this code in the new file of any text editor. Save it with htm or html extension. Open the Internet Browser. Open the saved file in it. Example: In body tag In body tag, background color is defined as black and textcolor is defined as the white.

this is the h1 header

this is the h2header

this is the h3 header

this is the h4 header

this is the h5 header
This is the use of "Break" tag
and you will see use of more tags
look at the use of comment tag it is good

This is the use of paragraph tag and you will see use of more tags

The effect of "hr" tag


Explanation of the page: The title of the page is at the top in blue strip. All the text appears in white color and background in the black color. Because in the tag the bgcolor and text color is defined. The horizontal line appears because of the
tag and the
tag breaks the text in between and displays it on new line. The comment statement is not displayed.

Character Format Tags These tags are used for the formatting of the text such as underline, bold, italic, font, size, color of the text. All these character formatting Tags are defined in the table shown below: Char Format Tag

Description



Displays bold text



Displays italic text



Renders as teletype or mono spaced text



Displays underlined text

<em>

Displays emphasized text



Displays big text

<small>

Displays small text

<strong>

Displays strong text

<sub>

Displays subscripted text

<sup>

Displays superscripted text



Defines the direction of text display



Defines the font face, size, and color of text

Tag The tag is used to make the text bold. Format: ................text......... Tag The tag displays the italic text. Format: ................text......... Tag The tag displays the typewriter text. Format: ................text......... Tag The tag displays the underlined text. Format: ................text......... <em> Tag The <em> tag displays the emphasized text. Format: <em> ................text......... Tag The tag displays the big text. Format: ................text......... <small> Tag The <small> tag displays the small text. Format: <small> ................text......... <strong> Tag The <strong> tag displays strong text. Format: <strong> ................text......... <sub> Tag The <sub> tag displays text in subscripted format.

Format: <sub> ................text......... <sup> Tag The <sup> tag displays superscripted text. Format: <sup> ................text......... Tag The tag defines the direction of the text. Format: ................text......... Tag The tag defines the font, color, size of the text. Format: ........text......... Examples of the Text Formatting tags Examples

Outputs

This text is bold

This text is bold

<strong> This text is strong

This text is strong

This text is big

This text is big

<em> This text is emphasized

This text is emphasized

This text is italic

This text is italic

<small> This text is small

This text is small

This text contains <sub> subscript

This text contains subscript

This text contains <sup> superscript

This text contains

this is underlined text

this is underlined text

Here is some Hebrew text

Here is some Hebrew text

superscript

You have read all the basis tags, So now lets do some practical. Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks. Example: This text is bold
<strong> This text is strong
This text is big
<em> This text is emphasized


This text is italic
<small> This text is small
this is underlined text
This text contains <sub> subscript
This text contains <sup> superscript
The use of font tag this is use of font tag Page in browser will Look Like:

Output Tags

These tags are often used to display computer/programming code. You might be surprised for "how to display the text containing the spaces, line breaks, programming codes, sample text, define variable". Do not worry, because in this chapter we are going to show you how easily you can do easily. So lets start with these tags: Tag

Description

<pre>

Defines preformatted text



Defines computer code text



Defines teletype text



Defines keyboard text



Defines a variable



Defines a definition term

<samp>

Defines sample computer code

<pre>.........Tag This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code. Format: <pre> .....text..... Example: <pre> for i = 1 to 10 print i next i Output: for i = 1 to 10 print i next i .....text ...... Tag This tag is also used to display the computer code. But better you use <pre> tag. Format: .....text..... .....Keyboard Input...... Tag This tag displays the Keyboard Input. Format: ........ Keyboard Input...... ......text.... Tag This tag displays the typewriter text. Format: .....text..... <samp>....sample text... Tag

This tag displays the sample text. Format: <samp> .....sample text..... computer variable This tag defines the computer variable. Format: computer variable definition term this tag is used for definition term. Format: definition term Examples of output tags Examples

Outputs

<pre> It preserve all spaces

It preserve all

Computer code

Computer code

Keyboard input

Keyboard input

Teletype text

Teletype text

<samp>Sample text

Sample text

Computer variable

Computer variable

Definition term

Definition term

spaces

Now you have learned the Output Tags so lets do some practical. Below there is a file type the same code on notepad (any text editor) and save it. now open this file in the internet browser. Example: Computer code
Keyboard input
Teletype text
<samp>Sample text
Computer variable

Note: These tags are often used to display computer/programming code.

Page in browser will Look Like:

Block Tags Tag Description

Defines an acronym



Defines an abbreviation



Defines an address element



Defines an long quotation



Defines centered text



Defines a short quotation



Defines a citation



Defines inserted text

<del>

Defines deleted text

<s>

Defines strikethrough text

<strike>

Defines strikethrough text

..text..Tag The tag defines the start of an acronym, like "WWW" and "C.B.I.". By marking up acronyms you can give useful information to browsers, spell checkers, translation systems and search-engine indexers. The title attribute can be used to show the full version of the expression when you are holding the mouse over the acronym(text). format: ..text.. ..text.. Indicates an abbreviated form, like "Inc.", "etc.". By marking up abbreviations you can give useful information to browsers, spell checkers, translation systems and search-engine indexers. In some browsers the title attribute can be used to show the full version of the expression when you are holding the mouse over the abbreviation.

format: ..text..
..address..
The
tag defines the start of an address. You should use it to define addresses, signatures, or authorships of documents. The address usually renders in italic. Most browsers will add a line break before and after the address element, but line breaks inside the text you have to insert yourself. Format with Example:
Donald Duck
Box 555
Disneyland
Output: Donald Duck Box 555 Disneyland
.........Text........
The
tag defines the start of a long quotation. Format with Example:

here is a long quotation here is a long quotation

....
This tag Centers its enclosed text horizontally. Format:
... text .......
small text The tag defines the start of a short quotation. Format: small text This tag defines the citation. Format: text This tag provide the facility of inserting the text in between the text. Format: text <del> Defines text that has been deleted in a document.

Format: <del>..text.. <s>or<strike> The <s> and <strike> tags defines strikethrough text. Format: <s> text or <strike> text Examples of Block tags Examples

Outputs

here is a long quotation



here is a long quotation

here is a short quotation

here is a short quotation

Center this text


Center this text

a dozen is <del>20pieces!

a dozen is pieces!

a dozen is 12pieces!

a dozen is 12 pieces!

Citation

Citation

A version is <s>not available. now available!

A version is not available. now available!

A version is <strike>not available. ok!

A version is not available. ok!

Now you have learned the Output Tags, so now lets do some practical. Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks. Example: Block Tags
center tag
Center this text
acronym tag WWW
abbr tag HTML
blockquote tag
here is a long quotation here is a long quotation
del tag a dozen is <del>20 pieces!
ins tag a dozen is 12 pieces!
s tag A new version is <s>not yet available. now available! strike tag
A new version is <strike>not yet available. now available!

Page in browser will Look Like:

Other Tags The <style> tag The <style> tag defines a style in a document. The style element goes in the head section. If you want to include a style sheet in your page, you should define the style sheet externally, and link to it using . Using this tag you can initialize the text properties as shown in the example. In the example color for the header tag is defined initially in the header part of the file using the <style> tag. Format

Example

Output

<style type="text/css"> h1 {color: yellow} h3 {color: lightgreen}

<style type="text/css"> h1 {color: yellow} h3 {color: lightgreen} style tag

This is header < h1 >

This is header < h1 >



This is header < h1 > This is header < h1 >

In the above example, h1 is a tag which will be displayed in a color which has been mentioned in the style tag. Just like h1 tag there is a tag i.e., h3 which will be displayed in the color which has been mentioned in the style sheet. Attributes Attribute

Value

Description

type

text/css

Defines the content-type

Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks. The
tag The
tag defines a division/section in a document. Use the
tag to group block-elements to format them with styles. This tag is used below the tag. Format

Example

Output



This is some text

This is a header in a div section

This is a paragraph in a div section



This is some text This is a header in a div section This is a paragraph in a div section

Attributes Attribute

Value

Description

align

left, right, top, bottom

How to align the text in the div element. better use style attribute.

Now lets have an example of both the tag. Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks. Example: <style type="text/css"> h1 {color: red} h3 {color: blue} style tag

Use of STYLE tag

This is header H1 text

This is header H3 text

Use of DIV tag
This is a header in a div section
This is a paragraph in a div section

Page in browser will Look Like:

In the above example we have seen the use of <style> and
tags. the both the headers h1 & h3 are displayed in the Red and Blue color because their color has been defined in the style tags. Then we saw the use of
tag, so the text defined in the
tag in displayed in the color defined inside the
tag.

Marquee Text with <marquee> Tags This tag is used to to get a moving text. As on the television you see the moving news headlines. You can do this by using the <marquee> tag. Format : <marquee> Write the text to be scrolled Example: <marquee> Write the text to be scrolled Attributes Attribute

Value

Description

bgcolor

colorcode,colorname Defines the back ground color to the text.

behavior

alternet, slide

Defines the type of movement to the text.

direction

down, up, right, left

Defines the movement direction of the text.

loop

positive integer

Defines the no. of times to text will scroll.

scrollamount positive integer

Defines the scrolling speed of the text.

title

text

Defines text will appear when mouse pointer is on it.

width, height

positive integer

Defines the area of scrolling.

Behavior attribute alternet: for this value the text bounces across the scroll region. slide: for this value the text slides into position. if you do not defines the behavior attribute then the text keeps scrolling continues manner according to the direction. BLINKING TEXT with Tag This blinking text is the text which blinks like a bulb with on/off system. This blinking of text can be achieved in the HTML using the Tag. Format : write the text to blink Example: This is the blinking text. so now lets do some practical. Just write/copy this example on any text editor new file and save the file and open in the browser and see how it looks. Example: Marquee & Blink Marquee text with
direction=up height=50 width=200 scrollamount=1 bgcolor=lightyellow
<marquee style="color: #FF0000; font-size: 12pt; font-weight: bold; font-family: Verdana" direction="up" height="50" width="200" scrollamount="1" bgcolor="lightyellow"> this is scrolling text

Marquee text with
direction=left height=20 behavior=alternate scrollamount=10 bgcolor=lightyellow <marquee style="color: #FF0000; font-size: 12pt; font-weight: bold; font-family: Verdana" direction="left" height="20" behavior="alternate" scrollamount="10" bgcolor="lightyellow"> this is scrolling text

Marquee text with
direction=left height=20 scrollamount=10 bgcolor=lightyellow <marquee style="color: #FF0000; font-size: 12pt; font-weight: bold; font-family: Verdana" direction="left" height="20" scrollamount="10" bgcolor="lightyellow"> this is scrolling text

BLINKING TEXT

This is the blinking text.

In the above example we have used both the <marquee> & tags and output is shown. In case of tag it might happen that the text displayed in tag do not appears to be blinking. It is all because the Internet Explorer do not support the blinking text where as the Netscape Navigator supports. Tags Ordered Alphabetically Tags

Description



Defines a comment



Defines an anchor



Defines an abbreviation



Defines an acronym



Defines an address element

<area>

Defines an area inside an image map



Defines bold text



Defines the direction of text display



Defines big text



Defines the blinking text in a document



Defines a long quotation



Defines the body element




Inserts a single line break