Labels

HTML and CSS - 04




If you are searching my previous posts on this series, the links for those are added below.

HTML and CSS - 01 

HTML and CSS - 02

HTML and CSS - 03

Lets learn some new HTML tags today. I'm adding examples for each tag so that you can copy it and place it inside the body section. 

 Line break       <br>

Ex :- <p> this line is the first line <br> This is the second line </p>

Single space     &nbsp;

Ex :- <p> This is the text before spaces &nbsp;&nbsp;&nbsp;&nbsp; This is the text after spaces</P>

Header tags <h6>    smallest header

Ex:- In our previous example, we have tested this header. 

Text formatting options

  • Bold text     <strong> or <b>

Ex :- <p> this is <strong>Bold text </strong> <p>

  • Italic         <em> or <i>

Ex :- <p>This is <em>Italic text</em></p> 

  • Underline   <u>

Ex:- <p>This is <u>underlined text</u> </p>

  • Strike      <strike>

Ex:- <p> This is <strike> strick text</strike></p>


Here is a small example HTML that you can go through. 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>My page title</title>
		<style type="text/css">
		p{
		color:green;
		}
		
		h1{
		color:blue;
		}
		</style>
	</head>
	
	<body>
		<h1>Machine Learning</h1>
		
		<p><strong>Machine learning (ML)</strong> is the <u>study of computer algorithms </u>
		that improve automatically through experience and by the use of data. 
		<br> It is seen as a part of <strong><em>artificial intelligence</em></strong>.<br>
		Machine learning algorithms build a model based on sample data, known as 
		"training data", in order to make predictions or decisions without being explicitly 
		programmed to do so. </P>
		
		<p> Machine learning <strike>algo</strike> algorithms are used in a wide variety of
		<strike>apps </strike> applications, <br>
		such as in medicine, email filtering, and computer vision, where it is difficult or unfeasible 
		to develop <strong><em><u>conventional algorithms</u></em></strong> to perform the needed tasks.</P>
	</body>
</html>


See the output of the above HTML.

feel free to update this HTML and try creating your own version.
And also try below text processing tags also and see how it is displayed in your browser. 

  • <mark> - Marked text
  • <small> - Smaller text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

Inline text formatting

You can use the above tags or you can use inline text formatting for better text decoration.

see the below example:-

Here I'm decorating a set of text using <font> tag


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>My page title</title>
		<style type="text/css">
		p{
		color:green;
		}
		
		h1{
		color:blue;
		}
		</style>
	</head>
	
	<body>
		<h1>Machine Learning</h1>
		
		<p><b>Machine learning (ML)</b> is the <u>study of computer algorithms </u>
		that improve automatically <br> through experience and by the use of data. 
		It is seen as a part of <strong><i>artificial intelligence</i></strong>.<br>
		<font size= 20 color="red" face="arial">Machine learning algorithms</font> <br>
		build a model based on sample data, known as 
		"training data", <br> in order to make predictions or decisions without being explicitly 
		programmed to do so. </P>
		
		<p> Machine learning <strike>algo</strike> algorithms are used in a wide variety of
		<strike>apps </strike> applications, <br>
		such as in medicine, email filtering,and computer vision, where it is <br> difficult or unfeasible 
		to develop <strong><em><u>conventional algorithms</u></em></strong> to perform the needed tasks.</P>
	</body>
</html>


Save it and see the output by yourself.  try new text formatting tags also.

Ok, guys. will see you in the next post. 😀








Labels:

Comments

Post a Comment

Popular Posts