INDEX: Paragraph_Writing | Text_Formating | Headings_Styling | Attributes | Images | Links | Lists | Tables | Forms | HTML_Colors
Paragraph Writing
To write or create a paragraph you have use tag <p> with its opening tag and closing tag, and the paragraph should be between the <body></body> tag. For example-
<html>
<head><title>The first page</title>
</head>
<body>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
</body>
</html>
The result should be like this-
If you want to give break in single line of text in a paragraph then you have to use the tag <br/>. Use this <br/> tag to give break between lines. For example-
<html>
<head><title>The first page</title>
</head>
<body>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<p>This is <br/>a break of line</p>
</body>
</html>
Result:
Formatting Text
Now we came to the very important part. This part is all about text styling. So bare with me, write the codes as shown below and check-
</head>
<body>
<p>This is my paragraph</p>
<p><b>This is bold text</b></p>
<p><i>This is italic text</i></p>
<p><big>This is big text</big></p>
<p><small>This is small text</small></p>
<p><strong>This is strong text</strong></p>
<p><inserted>This is inserted text</inserted></p>
<p><sup>This is superscripted text</sup></p>
<p><sub>This is subscripted text</sub></p>
<p><del>This is deleted text</del></p>
</body>
</html>
The result will be-
Heading Styles
According to the importance HTML possess six levels of headings. They are-
<html>
<head><title>The first page</title>
</head>
<body>
<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>
</body>
</html>
Result:
Line Creation
Use <hr/> tag to create a horizontal line in the page.
<html>
<head><title>The first page</title>
</head>
<body>
<p>This is first paragraph</p>
<hr/>
<p>This is second paragraph</p>
</body>
</html>
The result:
Include Comments Between Codes
It is necessary to write comments between the codes to let the second person understand your codes. Browser won't display this comment. So, to write this comment use the following method-
<!--This is your comment-->
For example-
<html>
<head><title>The first page</title>
</head>
<body>
<!--This is a comment-->
<p>This is first paragraph</p>
<hr/>
<p>This is second paragraph</p>
</body>
</html>
HTML Attributes
Additional information are provided by attributes to the function to get modified. The attribute sits in the opening tag to direct the line of code how it should get modified. For example if we want to bring a line at the center of the page then we should use align attribute and value as center.
<p align="center">This line is aligned to center</p>
Result:
Now come to the attributes of measurements part. If you want to modify the pixels of a line then use the attribute as width and value as px or %.
<hr width="80px"/>
<hr width="80%"/>
For example:
<html>
<head><title>The first page</title>
</head>
<body>
<p>This is first paragraph</p>
<hr width="80px"/>
<p>This is second paragraph</p>
</body>
</html>
You can place multiple attributes in the same element like-
<html>
<head><title>The first page</title>
</head>
<body>
<p align="center">This is first paragraph<hr width="80px"/></p>
</body>
</html>
Result:
Insert Image
For inserting an image you have to use <img> tag. Here you have to use src attribute which is used to define the image url, and you also have to have alt value of that image.
<img src="image url" alt="The image name"/>
For example:
<html>
<head><title>The first page</title>
</head>
<body>
<img src="http://example.com/facebookicon.png" alt="Facebook icon"/>
</body>
</html>
You can also specify the height and width of the image using the attributes height and width. Such as-
<img src="image url" height="250px" width="100px" alt="The image name"/>
There is a option to give border around the image by using the attribute border.
<img src="image url" height="250px" width="100px" border="1px black" alt="The image name"/>
Insert Links
Links are defined in HTML by <a> tag. Inside the opening <a> tag you have to insert href attribute to define the specific link. There is another attribute which is target, this attribute specifies whether the link open in new window or current window. If you want to open the link in new window then use _blank value. Example-
<a href="https://mluin.blogspot.com" target="_blank">MLuin's Tech Knowledge</a>
Insert List
If you want to order your list then you have to use the tag <ol> and for each list item use the <li> tag. Example-
<html>
<head><title>The first page</title>
</head>
<body>
<ol>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
</ol>
</body>
</html>
Result:
Now if you want to create an unordered list then you have to use the <ul></ul> tag instead of <ol></ol> tag.
Result:
Table Creation
Tables are defined by the tag <table>. There should be row and column in the table. So the row is defined by the tag <tr> and the column is defined by the tag <td>. Example-
<body>
<table>
<tr>
<td>Black</td>
<td>Yellow</td>
<td>Green</td>
</tr>
</table>
</body>
Now to give border in the table use the tag attribute border. Example-
<table border="2">
<tr>
<td>Black</td>
<td>Yellow</td>
<td>Green</td>
</tr>
</table>
Result:
If you want to color your boxes then use the attribute bgcolor. Example-
<table border="2">
<tr>
<td bgcolor="silver">Black</td>
<td bgcolor="yellow">Yellow</td>
<td bgcolor="green">Green</td>
</tr>
</table>
Result:
<body>
<table>
<tr>
<td>Black</td>
<td>Yellow</td>
<td>Green</td>
</tr>
</table>
</body>
Now to give border in the table use the tag attribute border. Example-
<table border="2">
<tr>
<td>Black</td>
<td>Yellow</td>
<td>Green</td>
</tr>
</table>
Result:
If you want to color your boxes then use the attribute bgcolor. Example-
<table border="2">
<tr>
<td bgcolor="silver">Black</td>
<td bgcolor="yellow">Yellow</td>
<td bgcolor="green">Green</td>
</tr>
</table>
Result:
Create Form
Usually forms are used to collect the user information. So to create a form you have to use <form> tag. At the same time use action attribute to point to the web page that will load after they submit the form. Example-
<body>
<from action="https://mluin.blogspot.com"></form>
</body>
There are two important attribute called method and name in the form. The attribute method has two types of value, one is GET which means when form is submitted the data will be visible and another one is POST which is used to make the data invisible after submission for any security purpose. Example-
<form action="url" method="GET">
<form action="url" method="POST">
Inside the form there should be filde for Name and Password. So to include them use <input> element and use type and name as attribute. For example-
<body>
<form>
<input type="text" name="username"/>Name
<br/>
<input type="password" name="password"/>Password
</form>
</body>
Result:
If you want to allow your users to choice only one value then you can change your input type to radio. Example-
<form>
<input type="radio" name="gender" value="male"/>Male
<br/>
<input type="radio" name="gender" value="female"/>Female
</form>
Result:
You can use checkbox instead of radio for allowing user to select more than one option. Example-
<form>
<input type="checkbox" name="gender" value="1"/>Male
<br/>
<input type="checkbox" name="gender" value="2"/>Female
</form>
Result:
Now your form is ready to submit. Create a submit button like below-
<input type="submit" value="Submit"/>
Result:
HTML Colors
Hexadecimal values are used to express HTML colors. There are 16 values 0 to F where 0 represents the lowest value and F represents highest.
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
Colors are displayed in combination of RGB ie, red, green and blue. Hashtag symbol(#) is used to write hex values.There are almost 16 million combinations of RGB.
