santoshspoudel: HTML

Hypertext markup language is at the standards markup language used to create web page. This language was first developed by Tim Berbers-Lee. The first web page was created by Tim Berners-Lee and put online in 1990. Web pages are also called HTML documents. So HTML are the building blocks of web documents. There are different versions of HTML; these are HTML, HTML+, HTML 1.0, HTML 2.0, HTML 3.2, HTML 4.01 (It has accessibility of Cascading Style sheet, and Multimedia) and now HTML 5.0 (It has accessibility of local storage and offline database).

Structure of HTML document

The basic structure of HTML document is as given below

<HTML>

<HEAD>

<TITLE> THIS IS TILE OF WEBPAGE</TITLE>

</HEAD>

<BODY>

This is the body part of webpage.

</BODY>

</HTML>

· <HTML>shows the starting of HTML document and </HTML> shows the ending of HTML document. All the other tags and contents of the webpages are contained within these tags.

· <HEAD> tag shows the starting of head section and </HEAD> shows the ending of the head. In the head section, we can put some information about an HTML documents. Some head elements like <TITLE> used to define certain information about html documents.

· <TITLE> tag show the starting of the title and </TITLE> show the ending of the title. This tag is issued inside the head tag. This tag is use to display the title of the documents of the browse's windows.

· <BODY> tag show the starting of the entire contents of the document and </BODY show the ending of the document. All the information are of webpages contained within these tags.

Advantages of using HTML

1. It is highly flexible and user-friendly.

2. It is an open technology that supports almost all the Web browser and platforms like MS-Windows, Macintosh, UNIX, etc.

3. It is efficient and reliable. You can create the Web page in order to advertise and promote products and services.

4. It is easily understandable and does not require long time training.

5. It provides search engine compatible to the Web sites.

Disadvantages of using HTML

1. It is complex to design attractive Web page only using HTML. So, other languages are used for additional programming.

2. It is difficult to develop a complete Web Site by using only HTML. Web development tools like Dreamweaver, Foundation are used.

3. It cannot be used to develop a dynamic Web page.

4. There is no any complete acceptable standard of HTML.

5. There are many incompatibilities of HTML.

Major features of HTML

1. HTML provides tags that helps display text in the form of tables to add clarity and readability to a webpage.

2. HTML can be used to display any type of document.

3. HTML provides tags that help in changing font shape, font size and color of the text of a webpage.

4. HTML provided a variety of formatting styles for web documents.

5. HTML allows images to be included in a webpage.

6. HTML provides hyperlink to connect different webpages with one another. Hyperlinks can be created using text, graphic and even images.

7. HTML provides features to facilitate navigations.

8. HTML is versatile language cand can be used in any platform (Macintosh, UNIX, and Windows).

9. HTML provides tags to embed video and audio to the webpage.

10. HTML is not case sensitive language, we can use upper case, lowercase and mix.

11. HTML is important as the base language that CSS, JavaScript PHP, are using this language.

12. HTML make test attractive

Importance of HTML in web page designing.

1. HTML takes great importance in the field of Web Designing. Without this you can't create a Web Page. For example, if you have planned to design some unique Website Templates for a Client than you have to use HTML for that.

2. HTML means Hyper Text Markup Language. It means if you want to see your webpage in proper format with heading, title, body text and images, then with use some tags of HTML you can design webpages and show to you and your customer.

3. HTML, or Hypertext Markup Language, is the basic language in which a website is encoded. The language is very easy to learn and simple to apply. The language consists of tags in which codes are written. For every
action there is a tag. HTML is use with all language like Java script, PHP, JAVA, CSS, ASP and .Net

4. HTML play vital role in website design field. HTML 5 takes great importance in the web designing. If you building or any web designing company develop any web pages they need html without this, you can't create a web page.

Use of HTML

1. It is used for basic layout creating or designing the Web page.

2. Without HTML, the World Wide Web will not exist.

3. It allows embedding text, image, multimedia (audio / video) and links to other documents and the Web pages.

4. It provides a means to create structured document by using paragraph, character formatting, links and lists.

5. It can embed scripts such as CSS, JavaScript, which affect the behavior and design of the Web page.

Web pages development: HTML is heavily used for creating pages that are displayed on the world wide web. Every page contains a set of HTML tags including hyperlinks which are used for connecting to other pages. Every page that we witness, on the world wide web, is written using a version of HTML code.
Web document creation: Document creation on the internet is dominated by HTML and its basic concept via tag and DOM i.e. document object model. HTML tags are inserted before and afterward or phrases to locate their format and location on the page. A web document consists of three sections: title, head, and body. Head includes the information to identify the document, including title and any other important keyword. A title can be seen on the browser’s bar and body section is the main portion of the website visible to the viewer. All the three segments are designed and created by the uses of HTML tags. Every section has their own specific set of tags, which are dedicatedly rendered keeping the head, title and body concepts in a loop.
Internet navigation: This navigation is possible by utilizing the concept of Hypertext. It is basically a text which refers to other web pages or text and when user click on it, would navigate to referenced text or page. HTML is heavily used to embed the hyperlink within the web pages. A user can easily navigate within the web pages and between websites as well, which are located on different servers.
Cutting edge feature: HTML5 with its set of standards and API is being used to introduce some of the latest trends in website creation business. Browser like Google Chrome is the perfect choice when it comes to implementing an HTML5 latest set of standard and APIs.
Responsive images on web pages: At the elementary level in applications of HTML, queries can be set to utilize the images, which are responsive in nature. With the srcset attribute of img element in HTML, and combining it with picture element, a developer can fully control how the user will render an image. Now different types of an image with size variation can be loaded by using the img element. Rules can be easily set with the picture element, we can declare img element with default source and then for every case, a source can be provided.
Client-side storage: Earlier, a user could not save the user’s browser data that would persist across sessions. To meet this requirement, server-side infrastructure has to be built or user’s cookies can be used.
Offline capabilities usage: Once data can be stored in the browser, the developer can think of a strategy to make application work, when a user is disconnected. HTML 5 has its application cache mechanism which would define how the browser manages the offline situation. Application cache, responsible for offline ability actually comprises of different components, which includes API methods that create an update, read manifest file and events.
Data Entry support with HTML: HTML5 standard and set of APIs can be used to support data entry level of work. As browsers implement new HTML5 standards, developers can simply add the attributes to the tag which indicate required fields, text, data format etc.
Game development usage: Since browsers support new specifications for HTML5 including CSS3 and light-fast JavaScript engine to drive a new rich experience, HTML5 can bring the reality of game development possible, which was earlier the forte of Flash and Silverlight. Every single feature of APIs need not be implemented, but most appropriate ones can be utilized while eliminating the rest of the features.
Native APIs usage to enrich website: HTML5 adds so many new abilities and tools, which was just an imagination in the past. A large set of new APIs regarding file system, Geolocation, drag, and drop, event handling, client-storage etc. are the capabilities which make usage of HTML5 more easier than ever before. Application experience can be enhanced with other APIs like Fullscreen, Visibility and Media Capture. A modern web application has asynchronous nature which can be fostered using Websockets and Web workers like APIs.

Classification of HTML TAGS

Broadly the tags used are categorized into two types:

I) Container Tags (Paired tags)

II) Empty tags (singular tags)

Container tags: - The HTML tags which have the corresponding end or closing tags are known as container tags. E.g. <Body>, <Font>, <html> etc. They are also known as paired tags

Empty tags: - The tags which have no end tags are called empty tags. They are also called stand-alone tags or singular tags. Example < IMG>, <BR>, <HR>, <!> etc.

HTML tags

1) Body tags: - All the contents and tags of the HTML document are contained inside the body tag. A webpage can have only one<BODY> tag. The body tag stats from <BODY> and ends with </BODY>.

Structure

<BODY>

…………………

HTML documents

………….

</BODY>

Some attributes used with <BODY> Tag

The body tag consists some attributes that allows setting different formats in the web page documents. Using these attributes, we can set background background color, text color etc.

Structure

<BODY

BGCOLOR="Color name"

BACKGROUND="image file"

TEXT="color name">any text content

</BODY>

Some attribute used with body tags are as given below

i) BGCOLOR :-This attribute is used to set the background color of the webpage. By default, a webpage has white background color, HTML support 16 colors with the BGCOLOR attribute red, blue, white, green, purple silver, lime, maroon, aqua, black, gray, heavy, olive, teal, fuchsia and yellow.

We can also set the background color by using color code. It is also known as RGB color format. In this format we can use 6 digits i.e. RRGGBB (here first two digits for red, next two digits for green and last two digits for blue). The code is given in Hexadecimal number system,

Some common color name with their equivalent color codes are given below

Color Name	Color code	Color Name	Color code	Color Name	Color code	Color Name	Color code
Aqua	#00FFFF	Silver	#C0C0C0	Olive	#808000	Green	#00FF00
Gray	#808080	Black	#000000	Teal	#008080	Purple	#800080
Navy	#000080	Lime	#008000	blue	#0000FF	yellow	#FFFF00
Fuchsia	#FF00FF	maroon	#800000	red	#FF0000

Example : <BODY BGCOLOR="blue"

Example

<html><head><title>first way of background color</title></head>

<body BGCOLOR ="Green"> background color of this page is green</body></html>

Background

The background attribute allows to set the background image in the webpage.

Syntax:

Example

<html>

<head> <title> using image as a background</title>

</head>

His everybody! welcome to you in may page

</body>

</html>

TEXT:- this attribute is used to set the foreground or text color of the webpage.

Syntax:

Example

<html><head><title>using foreground or text color</title></head>

Welcome to you in my page

</body>

</html>

Line break tag<br>

This tag is used for starting a new line point. We can put <BR> tag in the document from where to break the line. It is an empty tag. It does not have end tag.

Syntax

Text…. <BR>

Paragraph tag<p>

The <P> tag is used to create a paragraph in the webpage. It is a container tag but closing tag</P> is optional. We can align the paragraph either in left, right, center or justify using ALIGN attribute. The default alignment of paragraph is left.

Syntax: <P align: "left"/"right"/center"/justify">text…</P>

Center tag<center>

This tag is used to put the document at the center position from the current left and right margins. It has start and end tags(<center>…. </center)

Syntax: - (center> text…</center)

Horizontal line tag(HR)

This tag is used to draw the horizontal lien across the page. It is an empty tag. we can use different attributes with this tag such as align, Color, size, width etc.

Syntax:

<HR align ="left"/"right"/"center"/"no shade"

Color= "color name"

Size ="pixels"

Width="percentage">

Heading tags(<H1>…….<H6>

The heading tags are used to set different heading on the document. The first level of heading is defined using <H1>, second level<H2> …..<H6> is the last heading. In this heading text appears in small size.

Syntax:

<Hn Align= "left"/"right"/"center">text </Hn>, where, n is a number from 1 to 6

HTML Document formatting tags: - Different formatting tags are used in HTML document to give different design webpage. Example <FONT>, <B>, <I>, <U>, <SUB>, <SUPER> etc.

Font tag (<FONT>: - The <FONT> tag is used to change the size, color and face of the text. We can use different attributes with this tag such as Align, size, color, face etc. It is a container tag

Syntax:

<FONT

Size="value"

Color="color name"

Face="Font name">Text…. </FONT>

Where, size:-font size range from 1 to 7. The smallest font size is 1 and 7 is the largest font size. The default font size is 3.

Color:- sets the color of the text.

Face:- It changes the typeface of the text such as "Times New Roman", Arial, "Arial Black".

Font style tags: font style are used to change the appearance of the text such as bold, italic, underline, subscript, superscript etc.

<B>tag: - this tag is used to set the text in bold face.

Syntax: <B> text…</B>

<I> tag: - this tag is used to set the text in italic format

Syntax: <I> text…. </I>

<U> tag: - This tag is used to underline the text

Syntax: <U> text…. </U>

<Sup> tag: this tag is used to convert the text in superscript like A², B² etc.

<SUB> tag: this tag is used to convert the text in subscript like H₂O, 0₂ etc.

Image tag <img>

We can insert two types of image in the HTML document, they are inline images and background images.

Using <IMG> tag we can insert inline images in the webpage, This tag does not have end tag. Some attributes are src, width, height, align, border etc., The commonly used image fronts in HTML document are GIF (Graphics Interchange format) and JPEG (Joint phototropic export group)

Syntax

<IMG

src="image file"

Width="value:

Height="value"

Align="left"/ "Right"/"center"/"top"/"bottom"

Border="value">

Where,

src= source of image. It specifies an image file with its location

Width=it specifies width of the image.

Height=it specifies height of the image

Align=it specifies position of the image on the document.

Border=it sets the border around the image

Example:

<img src="d:\picture\future.jpeg"

Example

<html> <head><tile> picture</title></head>

</body>

</html>

Creating list in the HTML document: -

HTML supports three types of list ordered or numbered list, Unordered or Unnumbered list and definition list.

The ordered list is sequential list and the unordered list is bulleted list.

Creating ordered or Numbered lists

<OL> tag is used to create ordered or numbered list in the HTML document. The <OL> tags use <LI> tag as their content.

Attributes of <OL> tag

Some attributes of <OL> tags are as follows:

Type: this attribute specifies the type of number used in the list. The values for this attribute are: 1, I, i, A, a. The default value is 1.

Value Result

1 Arabic numeric such as 1, 2,3,4 5,…

i Lowercase Roman numbers such as i,ii,iii,iv,v…

I Uppercase Roman numbers such as I,II,III,IV,V..

a lowercase alphabet numbers such as a,b,c,d…

A Uppercase alphabet numerals such as A,B,C,D,E……

Start: this attribute set the starting number of the order. Its value is positive number. The default start value is 1.

Syntax: -

</OL

Creating unordered or unnumbered lists: <UL > tag is used to create the unordered or unnumbered list. The <UL> tag uses <LI> tag as their content.

Attribute of <UL> tag

Type: this attribute specifies the type of symbols or bullet style used for the list. The value for this attribute are circle, disc and square. The default value is disc.

Value Result

Circle sets the hollow circle

Disc Sets the solid circle

Square Sets the solid square

Syntax: <UL Type =" DISC/Square/Circle">

</UL>

Definition list tags(DL): - The <DL> tag is used for declaring a definition list. This tag is use within <DD> tag. It is a container tag which has starting and end tag<DL>……. </DL>. The <DT> tag defines the terms component of a definition list and the <DD> tag marks the start of the definition portion of an item in a definition list.

Creating table in Webpage

The <table> tag is used to create table in the HTML document, The <TR> <TD> and <TH> tags are used with <TABLE > tag.

<TR> tag defines the row of table, <TD> tags define a cell of a table and the <TH> tag defines the heading of table.

Syntax:

<Table>

<TR>

………</TR>

</TABLE>

The <table> tag uses the following attributes:

<Table

Border=number

Bgcolor="color_name"

Align="alignment _value"

Width=number

Height=number

Cellspacing=number

Colspan=number

Rowspan=number

Cell padding=number>

Marquee tag: -The <Marquee > tag is used for scrolling piece of text or text or image display either horizontally across or vertically down on the webpage.

Syntax:

<marquee

Behavor="Slide/"Scroll"/alternate"

Bgcolor="color name"

Direction ="left"/"Right"/"Up"/"Down"

Scrolldelay=Time in millisecond> text to be scrolled <marquee>

Where,

Behavior: It specifies the movement of marquee text. It may be slide/ Scroll/alternate. The default value of behavior or scroll

Direction: the default value or direction is left.

Bgcolor: it specifies the background color of marquee.

Scrolldelay: It defines how long to between each jump

Example

<html>

<head><title> marquee</head>

<body> <marquee> This text will scroll from right to left</marquee>

</body>

</html>

Inserting hyperlink in a webpage<a>tag

The anchor tag<A> is used to create all types of hyperlink in the webpage. Every anchor tag must have a closing or end tag</A> to signal the end of the anchor. The HREF attribute is compulsory used with <A> tag. HREF stands for hypertext reference,

Syntax:

<A HREF ="URL"> text or image to describe link</A>

Different type of hyperlinks

1) Linking the different sections of the same page:- This type of link called the intra-page hyperlink or the same page hyperlink. It create link between different section of the same webpage.

Syntax:

Here, "bookmark name" is name of place where you want to move.

2) Linking different pages in a website:-

<html>

<head><title> hyperlink example</title> </head>

<a href="page1.html"> click here to goto to page1.html</a>

</html>

Linking the different section s of the same page.

<html> <head> <title> hyperlink example</title><head>

<body>

< a name ="top"></a>

This is link is also called intra page hyperlink or the same page hyperlink.

</html>

Using image as the link

<html>

<head>

<title> Hyperlink example</title></head>

</body>

<htlm>

Frames The frame in HTML can be used to organized the sites, Frames allow to divide the page into more than one easily using the tag frameset.

<frameset> tag is use to create frame in HTML document. <FRAME> tag and <NOFRAME> tag is also used along with <FRAMSET> tag. The two atrributes rows and colors are used with <FRAMESET> tag.

Syntax

<HTML>

…………….

……….

</NPFRAMES>

</FRAMESET>

<HTML>

Form: A form creates blank line or data entry form where the users or visitors can fill some information as they need. Form can contain various option buttons such as check box, radio, button, accept or cancel button, etc. Various attribute with form tag. They are input, option, select, text area, size, name, maxlength etc.

Syntax

<Form>

………………….

Input element

……….

</Form>

The tags and attributes used to create form

Input tag:

Some input type are as follows: Text, Radio, Reset, Password, Checkbox,Image, Submit

<Textarea> tag: This tag is used to define text area in the form. The following are the attribute used with this tag:

· Name (Name of the tag) value (Editable information of the tag)

· Cols(Width of the text area) rows(height of the text area)

<Select>

This tag is used to create a menu so that visitors can get options list to select required option. The following are the attributes used with this tag

· Name (name of the tag)

· Multiple (if more than one option shown at a time)

· Size (number of options you want to display at a time)

<option> tag

This tag is used with <select> tag. This tag is used to define options for the drop down list.

Example of forms:

1. Text fields: - The text filed allows you to type any letters and number in the form.

<form>First name:<input type="text" name="firstname"/> <br/>

Last name:<input type="text" name="lastname"/></form>

2. Radio buttons: - radio button allows you to select required option in the form.

<form><input type="radio" name="sex" value="male">Male

<form><input type="radio" name="sex" value="female">Female

</form>

3. Checkboxes

The check boxes allow you to select more than one option form the list.

<form>

I have a cycle:

I have a bike

I have a car

</form>

santoshspoudel

Sunday, March 17, 2019

HTML

No comments:

Post a Comment