Working With HTML
Category : 10th Class
Working With HTML
Introduction
HTML is defined as the hypertext markup language used for creating web pages. It is also defined as the text which links to the other text and allows 3you to format, arrange and group text, display text as links, and add images and multimedia to a webpage. There are many version of HTML such as, HTML 1.0, HTML 2.0, HTML 3, HTML 4, HTML 5. HTML 5 is the latest version released in 2009 that includes a number of new elements and attributes and removes some elements and attributes that was the part of its earlier version. A text editor can be used for creating the HTML webpages. Some specialized HTML editors are also available.
There are number of HTML editors available for creating Web pages. The followings are the HTML editors.
Gedit: It is designed as general purpose text editor for Mac OS X and Windows has tools to edit source codes for creating webpage.
TinyMCE: It is an open source HTML editor offers HTML formatting tools such as, bold, italics, underline, TinyMCE is compatible with Internet Explorer, Mozilla firefox, Opera, Google Chrome.
CKEditor: It is an open source text editor can be used to create web pages. It is compatible with most of the popular internet browser such as, Internet explorer, Google chrome, Opera.
Adobe Dreamwaver: It is the web development application or HTML editor available for both Mac and Windows operating system.
Hypertext Markup Language (HTML)
HTML language is developed by Tim Berner-Lee at CERN (Consiel European pour la Research Nuclear) to enable permit the researchers to share their research papers with the help of the Internet. Generally all the browsers are supporting HTML but basically the HTML was used by Mosaic Browser. The HTML 1.0 is the first version of HTML, whereas continuous growth of Web extended HTML growth in several other ways. World Wide Web (W3C) is the organization which did not specify the fir version of HTML. This organization maintains the language and keeps involving it proper direction. Latest version of HTML is HTML 4.01 which is in general uses are is the sub version of HTML4.0. The errors which are occurring in HTML4.0 have been fixed in this version.
The whole HTML document comes under the <html>tag which is used as a container. The entire content of the HTML page comes under the opening and closing of the <html>tags. This <html>tag indicates the browser this is the starting of the document and the closing </html>tag indicates that it's the ending of an HTML document.
The following is the syntax:
<html>
…………….
Contents mentioned in the page
</html>
For the Heading of the HTML document the tag <head> is used. The information contains some certain headings regarding documents that come under this. There are only few tags which are valid under the heading section. These are the following:
<HTML dir = rtl>: Specifies the direction in which the browser should present the text. It can be set as Itr for left to right direction and rtl for right to left text direction.
<HTML lang = en>: Specifies the language in which text need to be presented on the Webpage. lang = en is used for Einglish language.
The following are the commonly used language codes that can be used with the lang attribute.
|
Language |
Codes |
Language |
Codes |
|
English |
EN |
Russian |
RU |
|
Hindi |
HI |
Greek |
EL |
|
Arabic |
AR |
Italian |
IT |
|
Portuguese |
PT |
German |
DE |
|
Spanish |
ES |
UK English |
EN-UK |
|
Sanskrit |
SA |
US English |
EN-US |
|
Japanese |
JA |
French |
FR |
<link>tag: Defines reference for the resource. The tag <Body Link = "color name"> sets the color of the lines on the webpage.
<base>tag: Defines a base URL for all the links present on a page.
<meta>tag: Defines the Meta- Information such as keyword and descriptions for search engines and refresh rates about the page.
<script>tag: The HTML page uses the script is defined by this tag.
<style>tag: Defines the internal style sheet for the HTML page.
The contents of the HTML document describe under the <body>tag. The contents of a web page whatever are they defined between the opening and closing of the <body>tag; it may be a text, audio, video and images all comes under this tag.
Adding Title to a Web Page
The <title> tab allows adding title to a Webpage. It is inserted in the head section of the page. In the caption of the browser the title of the web page is displayed, between the openings and closing <title> tags the title of the web page is written.
The following code snippet shows how to add title to a Web page:
<html>
<head>
<title>Student Personal Record</title>
</head>
</html>
Creating Paragraphs
Paragraphs play an important role in formatting text inside a Web page. For creating a paragraph HTML provides <p> tag. It is used to control the line spacing between the paragraphs and also within the paragraphs. Tag <p> is used to start a paragraph whereas ending is done through </p> tag.
The following code snippet shows how to create a paragraph:
<html>
<head>
<title> Student Personal Record </title>
</head>
<body>
<p>Student Personal Record page maintains the personal information of each student. Personal information includes name, father name, address, and phone number. </p>
<p>This page also has educational background of each student. </p>
</body>
</html>
Using Headings
HTML enables six predefined levels of heading. The number for headings contains under <h> tag, which is basically used to define the level of headings. The tag which defines the highest level is <hl> and the lowest level of headings is <h6> tag.
The following code snippet shows different levels of heading:
<html>
<head>
<title> Student Personal Record </title>
</head>
<body>
<h1> Level 1</h1>
<h2> Level 2</h2>
<h3> Level 3</h3>
<h4> Level 4</h4>
<h5> Level 5</h5>
<h6> Level 6</h6>
</body>
</html>
Changing Background Color
The contents of the Web Page are always written inside the <body> tag. The background colour of a web page is changed through the bgcolor attribute. The HTML element contains attribute as its characteristics, which generally modify the behaviour of that element. The attributes values are always given in double quotes. Syntax used for background colour attribute is:
<body bgcolor = "value">
The value to the bgcolor attribute can be assigned either by specifying the hexadecimal value of the colour or by specifying the name of the colour. A (#) is put before the value, when the colour value is specified the hexadecimal notation. The following table lists some important colours along with their values in hexadecimal notation:
|
Color |
Hexadecimal |
Color |
Hexadecimal |
|
Black |
#000000 |
Green |
#008000 |
|
Red |
#FF0000 |
Navy |
#000080 |
|
Lime |
#00FF00 |
Purple |
#800080 |
|
Blue |
#0000FF |
Silver |
#C0C0C0 |
|
Yellow |
#FFFF00 |
Aqua |
#00FFFF |
|
Aqua |
#00FFFF |
Gray |
#808080 |
|
Fuchsia |
#FF00FF |
White |
#FFFFFF |
The following code snippet shows how to change the background color webpage.
<html>
<head>
<title>My Webpage</title>
</head>
<body bgcolor=”green”>
</body>
</html>
How to Apply Bold and Italics
While designing a web page, sometime there is a need to change the text style in the web page to get the attention of the user for that particular text.
Thus HTML provides two tags for this purpose:
How to Insert Horizontal Line
To create a simple straight line on a page horizontal line is used. It basically a graphical image which acts as dividers and separates pages into sections. It generally provides the different types of visual separation which clearly defines the sections of a page. The tag which is used to insert the horizontal line is <hr> tag. It can be of different lengths and sizes.
Horizontal lines are the following:
The following attributes of horizontal <hr> tag are used to create the different types of horizontal lines:
Width
The line width is specified by the width attribute of <hr> tag. To create the horizontal line with different width, the following syntax is used:
<hr width=x>
or
<hr width = y%>
Size
The length of a line is specified by the size attribute of <hr> tag. To create the horizontal line with different size, the following syntax is used: <hr size = n>
Align
The alignment of the line indicates by the align attribute of <hr>tag. The syntax which is used to create the horizontal line with the different alignment is the following:
<hr align = "center/left/right">
Align attribute is also used within the <div> tag to align the content of paragraph.
Shading
To display a horizontal line without 3D shading effect the noshade attribute is used inside the <hr> tag.
Color
The colour of the horizontal line is defined by the color attribute of <hr>tag. In two ways the value of color attribute can be assigned: by colour code or by colour name in RGB (Red Green Blue). The following syntax is used to create the coloured horizontal line:
<hr color ="color name/color code">
How to Use Line Break
To break a line, the line break is used. Whenever you need to break a line the <br> tag is used to break it in paragraph, but a new paragraph is not started by this. Without using the additional space you can create a new line by using <br> tag.
How to Insert Comments
To insert a comment in a source code that is ignored by the browser the comment tag is used, to understand the code it is very helpful. To open a comment (<! —) this sign is used and it is closed with (- - >) this sign.
How to Create Lists
To itemize the information in a concise format, the list makes it easy. It is used to present the elements in an attractive way and very clearly so that the user can read as well as understand it easily.
You can create three types of list, in HTML:
How to Create Ordered List
The list of items in which each item of the list has a specific numerical order comes under the ordered lists. The ordered list is also known as numbered lists. The order number can be alphabetical or numeric and that can be either a lower case or upper case. By using <ol> tag ordered list is created. With the <li> tag, the items of list are created.
The following syntax is used for creating an ordered list:
<ol>
<li> item 1</li>
<li> item 2>/li>
</ol>
How to Create Unordered List
The list which appears as a list of items and bullets and the items are presented separately comes under the unordered lists. To create the unordered lists of items the <ul> tag is used and <li> tag is used to create the elements.
The following is the syntax which is used to create the unordered list:
<ul>
<li> list item 1 </li>
<li> list item 2 </li>
</ul>
How to create Definition List
The lists and explanation of the terms comes under the definition lists.
The tags which are used to create definition list are the following:
The following syntax is used to create a definition list:
<dl>
<dt>this is definition term
<dd>this is definition</dd>
</dt>
</dl>
Introduction of Links
The page of a website is connected through the links. By clicking a link, a user navigates to a new page of a website. You can break a long document into multiple pages which allows you to navigate from page to page easily, and this can only be done through the links. Basically links are having two basic components and these are Targets and Links.
How to Use Anchor Tag
The main element of the hypertext links in HTML is the anchor tag <a>. To connect one document to another document, it is used to create a hypertext link.
Different Types of Links
There are basically three types of links available in HTML:
Hypertext Link
With the help of hypertext the hypertext link is created. It may be underlined or coloured. The links between the web pages that can be either located in the same site or other site is created by hypertext link.
The following are the types of Hypertext links:
Bookmark Links
To connect one section to another section within the same document or to a specific section within another document, a bookmark link is used. Basically it consists of two documents: A target which acts as an identifier that designates the target of the link and a link where you click.
Email Link
A type of link that is used to create links, which open up an email application, is an email link. A new message window is opened, when you click on the link. Using <a> tag email link is created.
A Practical Approch to Create a HTML Document
Let us consider an example to create a HTML document to clear the concept about HTML tags.
HTML document can be created using any text editor such as, Notepad of a Windows operating system.
Perform the following steps to create the HTML document using Notepad application:
Step 1: Open Notepad application in Accessories of the Window operating system.
Step: 2. Type the following codes in the Notepad.
(a) Type <HTML> press Enter.
(b) Type <HEAD> press Enter.
(c) Type <TITLE> press Enter.
(d) Type HTML TUTORIALS and press Enter
(e) Type </TITLE> press Enter.
(F) Type </HEAD> press Enter.
(G) Type <BODY> press Enter.
(H) Type INTRODUCTION TO HTML TUTORIALS and press Enter
(I) Type </BODY> press Enter.
(J) Type </HTML>
Step: 3. Click on File menu to open Save as dialog box.
Step: 4. Type the name of the HTML document as Tutorial.html.
Step: 5. Change the desired location in which the document is to be saved. (Save the document on the Desktop.)
Step: 7. Click on Save.
Now, Notepad file is converted into HTML document with available and supported internet browser on the desktop named as Tutorial. The icon on the desktop for Tutorial can be clicked to view the content of the HTML document which appears as given in the following figure:
How to Insert Image in a HTML Web Page
The HTML tag <img> helps to insert an image in a Webpage. The tag <img> uses 1 the SRC source attribute, which takes the URL of the image files as value. There is not need to insert full path of the image in the SRC attribute if inserted image is located in the same folder as the HTML.
The following steps best describes the method to insert image in Webpage:
Step: 1 Open your HTML document in a text editor, such as Notepad.
Step: 2 Start writing using img tag. IMG tag is empty which means, it does not need closing tag. Type, following tags and attributes : <img src="URL of image" />. SRC is source in which the image file is stored.
Step: 3 Attribute alt which means alternate text in case image does not load.
Step: 4 After using alt attribute, size of the image can be specify by using the height and which with attributes as the following: <img src=”URL of images” alt=”Just in case” height=”25px” width=”50px” />
Step: 5 close the body tag and then close the HTML tag.
Step: 6 save he notepad file in desired located with file extension html.
Step: 7 open the saved file.
Step: 8 inserted image will display on the html document.
You need to login to perform this action.
You will be redirected in
3 sec
