Wednesday, February 5, 2020

HTML : An Introduction


HTML
> Only Text Editing and Formatting available
> Conditional & looping Statements, Operators, Data-types & Variables are not available. 
>Forms available but not available any manipulation on its data.

Java Script/VB Script - All facilities are available, which are missing in HTML.
 
* In Java Script/VB Script, stand alone programming not possible and always associated with any mark up language like HTML or DHTML.

HTML - Hyper Text Markup Language
DHTML - Dynamic Hyper Text Markup Language

Web Browser:
- MS Internet Explorer
- Mozilla FireFox (Open source)
- Google Chrome
- Netscape Navigator

* There is no specific Program Editor (IDE) for HTML/DHTML. We can write program code in any text editor and display output of a web page in any web browser.

Software:
-         Licensee Software
-         Freeware
-         Open Source
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~


Short Cut
Full Form
WWW
World Wide Web
W3C
World Wide Web Consortium (An Organization)
TCP/IP
Transmission Control Protocol / Internet Protocol
HTTP
Hyper Text Transfer Protocol
FTP
File Transfer Protocol
HTML
Hypertext Markup Language
DHTML
Dynamic Hypertext Markup Language
XML
eXtensible Markup language
XHTML
eXtensible Hyper Text Markup Language
CSS
Cascading Style Sheet
XSL
eXtensible Style-Sheet Language
DOM
Document Object Model
URL
Uniform Resource Locator


Domain Name System (DNS)
1) generic Top Level Domain (gTLD)
2) country code Top Level Domain (ccTLD)

generic Top Level Domain (gTLD)
.com
Commercial Website
.org
Organization
.gov
Government Department
.edu
Educational Institutional Institute
.net
Network Organization
.int
International Organization
.mil
US Military
.biz
Business
.info
Information
.tv
Television

Example:
HYPERLINK "http://www.amazon.com"
www.google.com
www.amity.edu
www.olx.com
www.prsuonline.com
www.homeshop18.com
www.ebay.com
www.freecharge.com
www.mldcollege.com
www.cgbse.net


country code Top Level Domain (ccTLD)
.in
India
.us
United State, America
.uk
United kingdom, England
.jp
Japan
.pk
Pakistan
.de
Germany
.ch
Switzerland

Example:
HYPERLINK "http://www.ignou.ac.in"
www.amazon.in
www.ebay.in
www.google.co.in
www.prsu.ac.in
www.cgvyapam.gov.in
          www.songs.pk

Special Domain:
.ac => for Academic
.co => for Company

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

  Website / Webpage - A webpage is a hypertext document in Internet. It may contain texts, images, animated objects, videos, tables, data forms, etc. A website is a collection of interconnected web pages. In internet, a website can be either static or dynamic. A webpage can be designed simply using a most popular markup language HTML.

HTML - Hypertext Markup Language is an internet (Client Side) programming language which is used to develop web pages. This is a Platform Independent Programming language because it can be programmed and run any computer system. This is a TAG based programming language. There are a number of HTML editors are available to create web pages, like MS FrontPage, MS Expression Web Designer, Adobe Dreamweaver, Eclipse, NetBeans, Amaya, CoffeeCup, Notepad++, etc. We can also use any of text editors to write HTML codes like Notepad in Windows OS. After writing the program code, we can use any Web Browser to display output / preview of webpage. There are many popular web browsers available, like MS Internet Explorer, Netscape Navigator, Mozilla FireFox, Google Chrome, etc. Extension of any HTML document is .html.

This is not a full featured (pure) programming language because it does not provide many programming features like data types, variables, operators, decision making and looping statements, etc. It is also not a case sensitive programming language. We are currently used HTML version 4.0.


<B>
          PGDCA
</B>

<P   ALIGN=”CENTER”>
CLASS -------------------------------------
---------------------------------------------
---------------------------------------------
</P>

<BR>

<IMG   SRC=”FLOWER.JPG”   HEIGHT=”100”   WIDTH=”150”>




TAG à HTML provides various statements which are used to create a web page, these statements are called TAGS. A tag contains under an Angle Bracket <  >  and almost every tag has both opening (start) and closing (end) tags. Some tags are not required closing (end) tag.

Almost every tag may have two components:
- Contents
- Attributes with a specific value.

<FONT>     - Opening (Start) Tag
</FONT>    - Closing (End) Tag

<FONT  COLOR= “RED”  SIZE= “5”>
          Hello Computer
</FONT>


<B> World Wide Web </B>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~


There are two types of tags:
1) Container Tag - Some HTML tags may have contents (text), so it is called Container Tag tag. It may have attribute / property. Like <HTML>, <HEAD>, <BODY>, <TITLE>, <B>, <I>, <U>, <P>, etc.
<P  ALIGN=“RIGHT”>
                   This is a paragraph
                   Related to HTML
          </P>

2) Empty tag - Some HTML tags may have NO contents (text), called empty tag. It does not required Closing/End tag. But it may have attribute / property. Like <BR>, <HR>, <IMG>, etc.
          <IMG  SRC=“FLOWER.JPG”  HEIGHT=“200”  WIDTH=“300”>

Note:  Some container tags may have NO attribute and value.
          Ex: <B>, <I>, <U>, etc.
          <B> Webpage Design </B>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~
 


Any web page contains two parts / section:
1) Head Section - It contains information about web page / web site, company name, author, language information, version, etc.
2) Body section - It contains actual contents of a webpage like text, image, animation, table, sound, video, data form, etc.


Basic Structure of any HTML document:
<HTML>
<HEAD>
                   Information related to web page, author, company name, search key, etc.
</HEAD>

<BODY>
                   Text
                   Image
                   Hyperlink
                   Animation
                   Video
                   Table
                   Data Form
</BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~




<HTML> Tag - This is the first tag of any webpage and start writing the program code. It starts any HTML document and contains everything like <Head>, <Body> and <!DOCTYPE>. Start and End tags both are required and supported by all the browsers like MS Internet Explorer, Mozilla Firefox, Google Chrome, Netscape Navigator, Opera Browser, etc.

Note: <!DOCTYPE> is a non executable tag, this tag is used for writing documentation and comments in the webpage.

<HEAD> Tag - It contains the head of an HTML document which holds information about the web document, such as its title, search keyword, language information, author, version, etc. Start and End tags both are required and supported by all the browsers.

Attribute
Specification and Value
LINK
It indicates a relationship between the document and another objects
META
Header information
SCRIPT
It holds programming script statement such as Java Script or VB Script


<TITLE> Tag à- It contains the title of the web page which will appear / display in web browser title bar. It is used by search engine to refer the document or search the web page. Each <TITLE> element required both start and end tags and supported by all the browsers.

<META> Tag - It gives more information about your web page, it includes meta data about your web page. It is mainly used for search engine to search the web page or web site. We specify all the “keywords” here which helps to search the web pages by a search engine on internet. Only start tag is required and supported by all the browsers.

Attribute
Specification and Value
CONTENT
We can specify some keywords or note for search engine

Example:
<! An Example of web page  DEMO.HTML>
<HTML>
<HEAD>
<TITLE> My First Web Page </TITLE>

<META  NAME = “PtRSU”  CONTENT = “Private College; Raipur ; PGDCA; DCA; BCA; Computer Science; Higher Education”>
</HEAD>

<BODY   BGCOLOR=“YELLOW”   TEXT=“RED”>
<H1> PtRSU, Raipur </H1>
A number of Courses are available  <BR>
related to Computer Science & Commerce
</BODY>
</HTML>

Note:
(1) The tag <!DOCTYPE> is never come inside of the <HTML> tag
(2) The tags <TITLE> & <META> are always come under <HEAD> tag, header section of the document.
(3) <!DOCTYPE> and <META> are Optional.

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~



BODY SECTION:

<BODY> Tag - It contains the body of HTML document. It includes the contents that will actually appears (display) in the web browser. The entire contents of the web pages are placed in the <BODY> tag. The content of body section may be text, image, graphics, tables, sound, video, animated object or data forms. Start & end tags both are required and supported by all the browsers.

Attribute
Specification and Value
BGCOLOR
It specifies browser’s background colour
TEXT
It specifies the colour of the body text
LINK
It defines the colour of link which is not visited.
ALINK
It defines the colour of Active link.
VLINK
It defines the colour of Visited link.
SCROLL
It specifies whether a vertical scroll bar appear to the right of the web document (Yes or No)
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element / tag.


Example:
<! BODYPAGE.HTML>
<HTML>
          <HEAD>
                    <TITLE> My College </TITLE>
          </HEAD>

          <BODY  BGCOLOR=“YELLOW”  TEXT=“MAROON”>
                    <H2> Example program </H2>
                    <P ALIGN=“JUSTIFY”>
……………
                             …………...
                             …………...
</P>
          </BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~



Predefined colours in Internet explorer (IE):
- Internet explorer supports more then 70 colours, some of them are given below:
RED           GREEN     BLUE         WHITE      BLACK
AQUA        GRAY        LIME          NAVY        PURPLE
SILVER      FUCHSIA   MAROON  OLIVE        TEAL
CYAN        MAGENTA         YELLOW 

RGB - CMYK

- We can also create or specify some new colours using colour values (codes). Colour values are expressed as RR GG BB, where RR is the value of RED component, GG is the value of GREEN component and BB is the value of BLUE component. Each colour component value ranging from “0 to 255” or “00 to FF” (Hexadecimal equivalent). Colour values are expressed with Sharp (#) symbol.

Example :
          RED           #FF0000
          GREEN      #00FF00
          BLUE         #0000FF
          WHITE       #FFFFFF
          BLACK      #000000
          YELLOW   #FFFF00
          LIME          #008000
          AQUA        #00FFFF
          FUCHSIA   #FF00FF
          GRAY        #808080
          MAROON  #800000
          NAVY        #000080
          OLIVE        #808000
          PURPLE     #800080
          SILVER      #C0C0C0
          TEAL                   #008080
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~



Comment tag : <!----comment----> This tag is used to write comments anywhere in the web page. We can read comments in the HTML program but it will not be displayed in the web browser. Only start tag is required and supported by all the browsers. There is no attribute for this tag.


<P> Paragraph tag:  This tag is used to write paragraph text in webpage and adds space before the paragraph. Start and End tags both are required and supported by all the browsers.

Attribute
Specification and Value
ALIGN
LEFT, RIGHT, CENTER, JUSTIFY


<Hn> Heading Tag:  We can create web page HEADING using this tag, like headlines. Here value of ‘n’ can vary from 1 to 6. H1 is the biggest and H6 is the smallest in size. Start and End tags both are required and supported by all the browsers.
Ex:    <H1> COMPUTER COURSE </H1>

Attribute
Specification and Value
ALIGN
LEFT, RIGHT, CENTER
STYLE
Inline styling is used to apply a unique style (or formatting) to a single HTML element (tag).
TITLE
Title of the tag (like “ToolTipText” in VB)

Example:
<! HEADING.HTML>

<HTML>
          <HEAD>
                   <TITLE> Information about My College </TITLE>
          </HEAD>

          <BODY  BGCOLOR ="YELLOW"  TEXT="#00FF55">
                   <H1   ALIGN="CENTER"> My College </H1>
                   <H2   ALIGN="CENTER"> Available courses </H2>
                   <H3> BCA </H3>
                   <H3> PGDCA </H3>
                   <H3> DCA </H3>
          </BODY>
</HTML>
~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

No comments:

Post a Comment