The internet offers a vast amount of information on a wide variety of topics. This information is spread over millions of websites. A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Notable examples are wikipedia.org, google.com, and amazon.com.
Website of webpage can be visited by using a web browser. A web browser is a software used to view (browse) the contents of web pages. Internet Explorer, Google Chrome, Opera, Safari and Mozilla Firefox are some of the popular web browsers.
A web page contains information in the form of text, graphics and animation that are designed to look attractive. We need to use a special language to create a web page. One such language is HTML. HTML stands for HyperText Markup Language. To use HTML to create a web page, you write markup codes in a document called an HTML document. Markup codes are also known as HTML elements. To create an HTML document you need to tools:
1- An HTML Editor to create and save the webpage.
2- A web browser to view the web page you have created.
Features of HTML
Some features of HTML are -
1- HTML is easy to understand and to learn.
2- It helps to make attractive web pages by adding graphics, videos, and sound.
3- It provides a flexible way to design web pages. You can change the content anytime.
4- HTML documents can be viewed on different computer platforms such as Macintosh, Windows or Linux.
HTML Elements
A web page is made up of HTML elements.Elements give structure to an HTML document. some elements on a webpage are the title, headings, body text, paragraphs, images and so on.
Tags and labels used to mark the beginning and end of an element. the opening tag, closing tag and the content between them forms an HTML element. A tag is always enclosed in an angle bracket < >. A closing tag is created by placing a forward slash (/) in front of an opening tag.Like- <head>, it is an opening tag and </head>, is a closing tag.
Types of HTML elements
HTML elements are of two types- container elements and elements.
1-Container element
A container element has an opening tag and closing tag. The text is placed between the two tags.
2-Empty element
Identity element has only an opening tag. The line break tag <br> and the horizontal ruler tag <hr> are examples of empty elements.
HTML Attributes
An attribute defines a property for an element.Most HTML elements have attributes. attribute provides information about an element such as height, width colour and so on.The values of attributes are enclosed in double quotation marks (“ “).Some examples of attributes are text, bgcolor and align.
The text attribute defines a colour for the text of the web page.
The bgcolor attribute defines a colour for the background of the webpage.
The align attribute aligns the text on the web page to the left, centre or the right side.
Basic HTML tags
Some commonly used HTML tags are:
HTML tag
1-This tag is used to tell the browser that the text between <html> and </html> is a web page. you can view the web page code in the web browser.
2- Every webpage code must start with <html> and end with </html>.It is a container tag.
Head tag
1-This tag is used to define the header area of a webpage.
2- Information about the document is given in the head tag. it is not displayed by the browser.
3- It is a container tag used in pear as <head> and </head >. Every web page code must specify its header.
Title tag
1-This tag is used to tell the browser that the text contained between <title> and </title>. Is the title of the webpage. The title is shown on the title bar or (title tab).
2-The use of title tag is optional. If you do not want to give a title to a webpage, the web browser will show the file name and its path as the title of the webpage.
Body tag
1- This tag is the main part of the web page coding where all the content is placed.
2- It tells the web browser that the text contained between <body> and </body> is to be displayed.It is a container tag and can be used only once in an HTML document.
3- The body tag can also be used along with its attributes such as text and bgcolor.
<body bgcolor=”red” > or <body text=”blue” >
You can also use more than one attribute simultaneously , for example:
<body bgcolor=”red” text =”white” >
Structure of an HTML document
Standard HTML document is divided into two sections: Head and Body.The basic structure of an HTML document is shown below-
<html>
<head>
<title> ….. </title>
</head>
<body>
…..
……
……
……
……
</body>
</html>
Creating and saving an HTML document
You can create an HTML document in a basic text editor such as Notepad, Notepad++. Notepad is ideal for HTML coding as the text in HTML documents to not need to be formatted. Some other text editors are Wordpad and Text edit. To start creating a web page using some basic tags, follow these steps.
1-Click on the Start All > Programs > Accessories > Notepad. OR Click on the Start All > then search Notepad and open.
2-Type the HTML code.
3-Click on the File menu.
4-Click on Save. The Save As dialog box appears.
5-Locate the path to store the file in the available drives.
6- In the File name box, type the name of the file created.(here, project1.html)
7-From the Save As type list, click and select All Files.
8-Click on the Save button to save the file.
Note- An HTML Document will always have either .htm or .html as its extension. You have to type the extension along with the file name.
Viewing an HTML document in a web browser
An HTML document can be viewed in a web browser.To view the document follow these steps:
1- Go to the drive where you have saved the file.(here Desktop)
2-Click on the file, the file will be opened in a few seconds.
If you have used all the tags properly, then it will show all things that you code in it. If it is not coming then recheck the coding. To open the coding follow these steps:
1-Right click on the file.
2-Select from the box, Open with and then click Notepad.
Nested Tags
It is possible to begin a second tag without closing the first one. This means that a tag can contain other tag within it. Such tags are known as nested tags.
While closing nested tags, the tag that has been opened last should be closed first.
For example,
1.<html>
<head>
<title> ….. </head>
</html>
</head> INCORRECT
2.<html>
<head>
<title> ….. </title>
</head>
</html> CORRECT
Some other useful tags
In addition to basic HTML tags, some other tags you can use our Heading, Paragraph, Line break, Horizontal ruler, Bold, Italic, Underline, Subscript, Superscript and Center.(In HTML the spelling of center is center, not centre)
Heading
HTML can define up to 6 levels of headings from h1 to h6.
h1 is the first and highest level of headings. H6 is the last and smallest.
This tag is a container tag. For example, the h1 tag starts with <h1> and ends with </h1>.
The heading tag can be used along with its align attribute. The align attribute specifies the horizontal alignment of the heading. The align attribute has four values: left right Centre or justify.
Syntax for left alignment: <h1 align=”left”> text ….. </h1>
Horizontal ruler
The horizontal ruler tag (written as <hr>) is used to draw a horizontal line between two sections of text. It has the following features:
1-It is an Empty tag.
2- It divides the webpage into different sections.
You can change the size, thickness, colour or alignment of horizontal ruler by using size, width, color, and align attributes.
Size (in pixels) is used to change the thickness of the line.
Width (in percentage) is used to change the size of the line.
Color is used to change the colour of the line.
Align is used to change the alignment in case the line is smaller than the page width.
For example -<hr size=”10” width=”50%” co;or=”green” align=”center” >
Paragraph
The Paragraph (<p>) tag is used to define the start and end of a paragraph in the text. It is a container tag starting with <p> and ending with </p>. It automatically inserts a blank line between two paragraphs. The paragraph tag can also be used with the align attribute. It is not necessary to close the paragraph tag with </p>.
Line break
The line break tag (written as <br> ) is used to start a new line when you do not want to start a new paragraph. It is an Empty tag.
Bold
The bold tag (written as <b>) is used to give a bold effect to the text on a webpage. It is a container tag starting with <b> and ending with </b>.
Italic
Italic tag (written as <i> ) is used to give an italic effect to the text on the web page. It is a container tag starting with <i> and ending with </i>.
Underline
Underline tag (written as <u> ) is used to underline the text on a webpage. It is a container tag starting with <u> and ending with </u>.
Subscript
The Subscript tag (written as <sub> ) is used to make the text smaller and lower than the main text on a webpage. It is a container tag starting with <sub> and ending with </sub>.
Superscript
The superscript tag (written as <sup> ) is used to make the text smaller and higher than the main text on a webpage. It is a container tag starting with <sup> and ending with </sup>.
Center
Center tag is used to place the text or image in the centre of a webpage between the left and right margins. It is a container tag starting from <center> and ending with </center>.
Font tag(<font>)
The font tag is used to display the text in a particular font style, size and colour. It is a container tag starting with <font> and ending with </font>. The three attributes of the font tag are:
Size:The font size attribute is used to specify the size of the text.The smallest font size is 1 and the largest font size is 11. It is a container tag starting from <font size> and ending with </font>. For example- <font size=”6”> This is a font size 6 </font>
Color:The font color attribute is used to set the colour of the text. The value of this attribute is the name of the colour. It is a container tag starting from <font color> and ending with </font>. For example- <font color=”pink”> Hello </font>
Face:The font face attribute is used to specify that typeface or the name of the font. It is a container tag starting from <font face> and ending with </font>. For example-<font face=”Arial”> Hello </font>
No comments:
Post a Comment