html1

Share this page :

Introducing HTML

 

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language.

  • Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext.
  • Markup Language describes how HTML works. With a markup language, you simply “mark up” a text document with tags that tell a Web browser how to structure it to display.

Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and a web browser. Notepad is the most basic of simple-text editors.

HTML is written in the form of tags, which are by pairs of angular brackets (< and >) and some text placed between these bracket. The text portion between a pair of angular brackets defines HTML elements. Most of HTML element has two basic properties.

  1. Attributes
  2. Contents

Therefore they have an opening tag (<element-name>) and a closing tag (</element-name>).    

  • <html> – The main container for HTML pages
  • <head> – The container for page header information
  • <title> – The title of the page
  • <body> – The main body of the page

History of HTML

HTML is one member of a family of markup languages called SGML (Standard Generalized Markup Language)

SGML was developed by the International Organization for Standards in 1986 to define markup languages designed for various different purposes.

HTML and the WEB were first conceived in 1989 by a researcher named Tim Berners-Lee who works for CERN, the European Laboratory for particles physics in Geneva, Switzerland. CERN researchers developed the first World Wide Web programs in 1990. In the year 1994 HTML adopted the standard W3C (World Wide Web consortium).

The Text Editor

You will also need a text editor program capable of creating plain text files e.g. Notepad for Windows.

Start > all programs > accessories > notepad.
or
Start > type notepad > ok.

How to save & run the file?

  • Save the file with “.html” extension.
  • Open any browser (Internet Explorer/Opera/Mozilla/Chrome) or
  • *Right click on the file=>open with=>Internet Explorer

Description:

The <html> Element:-

The html element starts an html document. It contains everything an HTML documents.

 

The <head> element:-

The <head> element contain general information about the HTML document such as title, keywords for search engines and a base address for URL’s.

 

The <title> Element:-

The <title> element contains the title of the HTML document, which appears in the title bar of the web browser and is used by the search engines to refer the documents. Each <head> element should contain a <title> element.

 

The <body> element:-

The body element contains the body of an html document, which includes the entire that will appear in the web browser. It can also include text, image and multimedia elements.  

Break tag:
It inserts a blank line.
<br>

Bold tag:
The bold tags surround the whole texts bold.
<b> bold</b>

Italic tag:
The italic tags surround the whole texts italic.
<i> italic</i>

Underline tag:
It inserts a line under the text.
<u>Princess</u>

Horizontal line tag:
To separate major sections of a web page, use the horizontal rule or hr tag. This inserts a straight
line like you see right above the heading for this section.
The HTML format for a horizontal rule tag is:
<hr>
<hr width=100% color=red>
<hr size=10>
<hr size=10>

Paragraph tag:
It inserts a blank line and starts a new paragraph.
<p>
<p align=center>

Space tag:
An HTML code for adding a space character is the special character known as the “non-breaking space”:
&nbsp;
<b>
H &nbsp; T &nbsp; M &nbsp; L &nbsp;
</b>

PRE-FORMAT TAG
The pre format tag instructs your web browser to display the text exactly as typed in the HTML document, including spaces, tabs etc.

Example:

<html>
<body>
<font face=”Monotype Corsiva” size=”15″ color=”blue”>
<center>Programming Language</center>
</font>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><u>This text is underline</u></p>
<hr width=”90%” color=”red”>
<p><tt>This text is typewriter</tt></p>

<p><em>This text is emphasized</em></p>
<p><strike>This is strikethrough</strike></p>
<p><code>This is computer output code</code></p>
<p>Subscript: H <sub>2 </sub>O</p>
<p>Superscript: A <sup>2 </sup></p>
<p>Degree: 10&deg;F</p>
<p><b>This is space tag</b></p>
<p> H &nbsp; T &nbsp; M &nbsp; L &nbsp; </p>
<p>
<pre>This is preformatted text:
1
12
123
1234
12345
</pre>
</body>
</html>

LIST:
1. Unordered Lists:
Unordered Lists, or <ul> .. </ul> tags, are ones that appear as a list of items with “bullets” or markers in the front. The bullet marks will depend on the particular version of your web browser and the font specified for displaying normal WWW text.

2. Ordered Lists:
Ordered lists are ones where the browser numbers each successive list item starting with “1.”

Example 1:
<html>
<body>
<ul>
<li>IT
<li>MS Office
<li> CIT
</ul>
<ul type=circle>
<li>DDEO
<li>MS Office
<li> DSA
</ul>
<ul type=disc>
<li>DFA
<li>MS Office
<li>Multimedia
</ul>
<ul type=square>
<li>IT
<li>MS Office
<li>DDTP
</ul>

</body>
</html>

Example 2:

<html>
<body>
<h1 align=”center”> <u> Example of Ordered List </u> </h1>
<ol>
<li>Software
<li>Hardware
</ol>
<ol type=A>
<li>Software
<li>Hardware
</ol>
<ol type=i>
<li>Software
<li>Hardware
</ol>
<ol type=I>
<li>Software
<li>Hardware
</ol>
<ol type=a>
<li>Software
<li>Hardware
</ol>
</body>
</html>

 

What is Nested List?

A nested list is a list inside another list.

Example 3:
<html>
<body>
<h2 align=”center” style=’color:red;’>
<u>Nested List</u>
</h2>
<hr color=magenta>
<ol type=”A”>
<font color=red>
<li>Burdwan University</li>
</font>
<ol type=”1″>
<li>Arts</li>
<ol type=”a” style=’color:magenta;’>
<li>English</li>
<li>Sanskrit</li>
</ol>
<li>Science</li>
<li>Music</li>
</ol>
<font color=blue>
<li>Kolkata University</li>
</font>
</ol>
</body>
</html>

What is Hyperlink?
A hyperlink is a link between web pages, and when you click it, you move to another web page or some other section of the same webpage. You can create a hyperlink using anchor tag (<a>). The href attribute of <a> tag takes the reference of the web page. The term href stands for Hypertext Reference.

Example 1:

  • Create a folder on the desktop
  • Right click on it > open
  • Right click on the blank area > new > microsoft word document > type name a > press enter
  • Right click on the blank area > new > microsoft excel worksheet > type name b > press enter
  • Right click on the blank area > new > text document > type name c > press enter

<html>
<body>
<h2 align=”center”> <u> Word, Excel & Text File Hyperlink </u> </h2>
<ol>
<li>
<a href=”a.docx” >
Click here to open Word File
</a>
</li>

<li>
<a href=”b.xlsx” >
Click here to open Excel File
</a>
</li>

<li>
<a href=”c.txt” >
Click here to open Text File
</a>
</li>
</ol>
</body>
</html>

Example 2:

<html>
<body bgcolor=”red”>
<h1 align=center>This is Page 1</h1>

<a href=”page2.html”>
click here to go page2
</a>
</body>
</html>
Save this file with “page1.html” name.

Example 3:

<html>
<body bgcolor=”yellow”>
<h1 align=center>This is Page 2</h4>
<a href=”page1.html”>
click here to go page1
</a>
</body>
</html>
Save this file with “page2.html” name.

What is Bookmark? [ Linking different section of a webpage ]
HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks are practical if your website has long pages. To make a bookmark, you must first create the bookmark, and then add a link to it. When the link is clicked, the page will scroll to the location with the bookmark.

<html>
<body>
<center>
<a name=”x”> <h4>This is the top of the page.</h4> </a>

<h4>Click here to go at the

<a href=”#BOTTOM”> bottom </a> of the page. </h4>

<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>

<hr>

<a name=”BOTTOM”>

<h4>This is the bottom of the page.</h4> </a>

Go <a href=”#x”> top </a> of the page.</h4>

</center>
</body>
</html>

Working with images

  • At first create a folder
  • Copy some images in it. [Start button > type .jpg > enter > copy images]
  • Rename the images as a, b, c etc

<html>
<head>
<body>
<center>
<img src=”a.jpg” height=”150″ width=”150″>

<img src=”b.jpg” height=”250″ width=”250″>

<img src=”c.jpg” height=”150″ width=”150″>

<hr color=”magenta” size=”5″ width=”75%”>
</center>
</body>
</html>

what is <hr> tag?

The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections.

Click here

Share this page :