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

20 Comments

  1. The basic of HTML was explained nicely. Helpful post πŸ‘

    ReplyDelete
  2. Very helpful while creating HTML page..

    ReplyDelete
  3. Very well explained the html tags...

    ReplyDelete
  4. Very well defined are you a web desginer😊

    ReplyDelete
  5. Thank you for sharing the basics of HTML codeing its helpful for me as a beginner

    ReplyDelete
  6. Keep it up bro..keep working keep growing
    It was a nice tutorial...waiting for more

    ReplyDelete
  7. This is very informative for us we can learn alot from the topic and can implement in our websites thanks for sharing πŸ˜ŠπŸ‘

    ReplyDelete
  8. I sure have a weak knowledge of HTML and your post just revealed that to me. I'll need to go through this article one more time...slowly, this time around.

    ReplyDelete
  9. Amazing explanation... Keep it upπŸ‘

    ReplyDelete
  10. Nice information... Good for cs students
    ...keep sharing

    ReplyDelete