Start Learning HTML we can use any text editor program. E.g. Notepad HTML stands for Hyper Text Mark-up Language. It is The language used for creating web pages. To write the HTML codes </BODY> ……. </HTML> ,Save it with thee extension‘. HTML’OR ‘.HTM’
Programs used for web page designing
- Front Page: Microsoft product to design web page
- Flash :Program used for creating animation effects on webpage
- Dream weaver: Web page designing program with more advanced options
Basic HTML Tags
HTML tags are the signals to web browser to display text on screen and to control the structure webpage. Basic HTML tags needed for creating webpage are:
- <HTML>: surrounds entire HTML document
- <HEAD>:contains the information about webpage
- <TITLE>:displays the title of webpage in title bar
<BODY>:contains all the text to display on page
Types of tags
There are two types of tags used:
- Paired Tag (Container Tag)
The tag which include both beginning and ending tags.
E.g. <B> text </B> (to make text bold)
- Singular Tag (Empty Tag)
The tag which do not have ending tag. E.g. <BR> (to start new line), <HR> (to insert horizontal line), <IMG> (to insert inline image)
Basic Structure of HTML
<HTML>
<HEAD>
<TITLE> Title for the webpage </TITLE>
</HEAD>
<BODY>
text and other tags
</BODY>
</HTML>
[basic structure of HTML is known as skeleton of HTML and different elements inside the html <body> tags are known as flesh of HTML]
Starting First Web Page
- Open Notepad
- Type the code:
<HTML>
<HEAD>
<TITLE> Title for the webpage </TITLE>
</HEAD>
<BODY>
text and other tags
</HTML>
- Save it with the extension ‘.HTML’ OR ‘.HTM’
Attributes
Attributes are extra properties of tags, which provides additional information of tags to browser
Attributes of <BODY> tag
BGCOLOR: To give color on background BACKGROUND: to use picture on background TEXT: to give text color on page LEFTMARGIN: to set the left margin on page
RIGHTMARGIN: to set the right margin on page
- Example:
<BODY bgcolor=“green” text=“white”> text
</BODY>
◾ Note:
Colors in HTML pages can be specified using color names or color codess.
Code for some colors:
White: F Black: 000000
Red: FF0000 Green: 00FF00 Blue: 0000FF
Sample HTML document
<HTML>
<HEAD>
<TITLE> Nepal </TITLE>
</HEAD>
<BODY bgcolor=“green” text=“red”>
Nepal is a beautiful country. It is rich in natural resources. I love my country Nepal.
</BODY>
</HTML>
<P> tag
Used for creating a paragraph
Attributes of <P> tag
Align = “left” / “right”/ “center” / “justify”
[aligns the paragraph to left, right, and center respectively]
Sample HTML document
<HTML>
<HEAD>
<TITLE> text for title </TITLE>
</HEAD>
<BODY bgcolor=“green” text=“red”>
<P align=“center”>
</P>
paragraph to display on the page
</BODY>
<HTML>
Character Formatting tags
<B> tag: used for making text bold
<B> text </B>
<I> tag: used for making text italic
<I> text </I>
<U> tag: used for underlining text
<U> text </U>
<Sup> tag: used to give superscript (power) effect on text
a<sup>2</sup> + b<sup> 2</sup>
<Sub> tag: used to give subscript (base) effect on text
H<sub>2</sub> O
Example
<B> This text is bold </B> <br>
<I> This is italic </I> <br>
<U> It has underline </U> <br>
<sup> this text is in <sup> superscript </sup>
<sub> this text is in <sub> subscript </sub>
<FONT> Tag
e.g.
<FONT face=”Verdana” size=5 color=”red”> text
</FONT>
[default font size is 3]
Heading
Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
Line Breaks
The <br> tag is used when you want to end a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This <br> is a para<br>graph with line breaks</p>
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by
<!– This is a comment –>
List in HTML Ordered List
Syntax: <OL TYPE=”1″/”A”/”a”/”I”/”i”>
<LI> Item 1 </LI>
<LI> Item 2 </LI>
<LI> Item 3 </LI>
</OL>
Example:
<ol type=”1″>
<li> Basic Computer </li>
<ol type=”a”>
<li> Fundamental </li>
<li> Windows </li>
<li> MS Office </li>
</ol>
<li> Graphic Designing </li>
<ol type=”a”>
<li> Photoshop </li>
<li> pagemaker </li>
<li> Indesign </li>
</ol>
</ol>
Unordered List
Syntax: <UR TYPE=”Circle”/”Square”/”Disc”>
<LI> Item 1 </LI>
<LI> Item 2 </LI>
<LI> Item 3 </LI>
</UL>
Example:
<UL type=”Disc”>
<li> Super Computer </li>
<li> Mainframe Computer </li>
<li> Mini Computer </li>
<li> Micro Computer </li>
</UL>
HTML Character Entities
Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign (<) in HTML, we have to use a character entity.