Create a HTML Webpage with inline CSS

Create a HTML Webpage with inline CSS

Hello Every One,

So we have learnt about HTML till now in our HTML Introduction, HTML Tags, HTML Tags Part I, HTML Tags Part II, HTML Tags Part III, HTML Tags Part IV & HTML Tags Part V. we have learnt lots of tags in out earlier tutorial its time to use them and create a web-page. In below example, I am creating a HTML page with inline-CSS or you can say with style tag which we learnt under HTML Tag Sec V.

In below example we created HTML file just like a book article and a contact form as well. We given header where we mentioned about company title and sub title, a NAV bar sample set with five navigation and then we added an image and sample article about the image. At last we create a contact form and footer part as well where we mention sample copy-rite message. So lets start with code:

Code:

<!DOCTYPE html>

<html>

<head>

<title>MTH-Schools</title>

</head>

<body>

<div style="width:100%; height: 100%; background-color:#fcba03; text-align: center;">

<header>

<h1 style="font-family: Ubuntu; color: #f6f6f6;">MTH Schools</h1>

<h2 style="font-family: Raleway; color:#f6f6f6;"><u>A Unit of Technical School</u></h2>

<div style="font-family: Raleway; width: 100%; text-align: right; color: darkred;">

<a href="https://www.google.com/">Home</a> |

<a href="https://www.google.com/">About Us</a> |

<a href="https://www.google.com/">Products</a> |

<a href="https://www.google.com/">Services</a> |

<a href="https://www.google.com/">Contact Us</a>

</div>

</header>

<section>

<h1 style="font-family: Raleway; color: #343434;">Sample Heading</h1>

<img src="img/slideImage1.jpg" style="width: 50%;">

<p style="font-family: Ubuntu; color: #333; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,uis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

</section>

<hr style="color: #f6f6f6;" />

<section>

<h1 style="font-family: Raleway; color: #343434;">Sample Heading</h1>

<img src="img/slideImage2.jpg" style="width: 50%;">

<p style="font-family: Ubuntu; color: #333; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

</section>

<hr style="color: #f6f6f6;" />

<section>

<h1 style="font-family: Raleway; color: #343434;">Contact Us</h1>

<input type="text" placeholder="Your Name" style="width: 500px; height: 25px;"><br>

<input type="E-Mail" placeholder="Your E-Mail" style="width: 500px; height: 25px;"><br>

<input type="text" placeholder="Contact Number" style="width: 500px; height: 25px;"><br>

<textarea placeholder="Your Message" style="width: 500px; height: 100px;"></textarea><br>

<button style="width: 250px; height: 25px;">Submit</button>

</section>

<footer style="width: 100%; height: 20px; background-color: #333; color: #ffffff; font-family: Raleway;">

copyrite to www.mthschools.tech

</footer>

</div>

</body>

</html>

Result:

Page Image 1

Page Image 2

Page Image 3

So we write a simple code with the help for few tags and some design I with some of inline-CSS. We will cover CSS topic next. Where we will design webpages more presentable and desirable.

So guys hope you all understood the basic of HTML and stay with me for next articles, where we will learn more about HTML designs and other topics.

Thank you