Blog

In this tutorial, we will learn about HTML Quotation. The HTML Quotation tag is used to show quotation text in the webpage. We usually use HTML Quotation to make this text different from the rest of the content. Here is a list of some tags which we used to add quoted text in the webpage. <q> <blockqoute> <abbr> <address> <cite> <bdo> Now you will learn about each tag from the above list. <q> tag: This tag is used to show text inside the double-quotes. <p><q>Everything comes to him who hustles while he waits.”</q>― Thomas Edison</p> Output: “Everything comes to him who hustles while he waits.”― Thomas Edison <blockqoute> tag: The blockquote tag is used to add quotations in a web page. blockquote doesn’t add quotes around text it changes the alignment of text. <p>www.owlbuddy.com</p> <blockquote> Welcome to owlbuddy.com </blockquote> Output: www.owlbuddy.com Welcome to owlbuddy.com <abbr> tag: Here abbr stands for abbreviation. This tag is used to show abbreviation on the web page. Check out the following example code. <abbr title=”Hyper Text Markup Language”>HTML</abbr> is used for Web Designing. Output: HTML is used for Web Designing. <address> tag: The address tag is used to show contact information is web-page such as a physical address, email address, URL,  phone number etc. check out the following example code to understand it. <address> David Williams<br> London City<br> United Kingdom </address> Output: David Williams London City United Kingdom Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML IFrame. The iframe is used to show a web page on a web page. That web page may be from the same site or maybe from the same site. Here we will learn how we can create an Iframe element on our web page. Here we will also learn how we can Embed YouTube video and Google Maps on our web page. So to add Iframe element we have to add Iframe tag in our code. Check the example below. Example: <iframe src=”https://www.google.com/” height=”400px” width=”400px”></iframe> Output: Note ! You can also use Inline CSS to set border, border radius, height and width of Ifarme . Embedded YouTube Video in a Web page:  It is so easy to Embed YouTube video on a web page. Just open the video on YouTube. Then just click the share button which is located under the video. Then click on first option Embed. Then copy whole IFrame code and add it in your web page thats it now you can see YouTube video is embedded in your web page. Example: <iframe width=”100%” height=”315″ src=”https://www.youtube.com/embed/RyhCVKjccko” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe> Output: Embedded Google Maps in a Web page: To Embed Google Maps open google maps in your PC and search for a location which you want yo embed in your web page. Then click on the share button. Then click on Embed a map. Then copy whole IFrame code and paste in your web page. Now you can see Google Map on your web page. Example: <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109066.42047370203!2d75.5033781601329!3d31.322378738267222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391a5a5747a9eb91%3A0xc74b34c05aa5b4b8!2sJalandhar%2C%20Punjab!5e0!3m2!1sen!2sin!4v1572023568838!5m2!1sen!2sin” width=”100%” height=”450″ frameborder=”0″ style=”border:0;” allowfullscreen=””></iframe> Output: Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML colours. while designing web sites we use a different colour for text, headings and body page. Now the question arises how we can add these colour in HTML elements. In HTML we can add colours in our HTML elements using a predefined colour name, hexadecimal colour codes, RGB value, HSL value, RGBA value and HSLA value. There are around 140 predefined colour codes names available in HTML. Click Here To Check List You can use these HTML colour anywhere in your HTML page like in Heading Color or in Paragraph colour or as border colour. Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML Comments. HTML comments are not to design we page they are just for the convenience web designer. Because when we design web page there may be several elements in our web page. So to keep it remember the use of each element in our web page we add comments. Lets check HTML Comments with the help of an example. To add a comment on the web page you have to use special symbols in your code. To understand it clearly check this example. Example: <!– start of p tag –> <p>Welcome to Owlbuddy.com</p> <!– end of p tag –> Output: Welcome to Owlbuddy.com Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML Form. HTML forms are used to add form in web page get data from the user. For example, you want to add login form or contact form in your page in this case you can add HTML form element in your web page. To add form in your web page you have to add form tag in your code. In between start and end of this form tag you can add input tag to mention what of information user fill your form like password, text, file etc. In order to mention type user can fill-in form, you have to use type attribute of the input tag. Check this example where we will create a basic login form. Example: <form> <input type=”text” placeholder=”Enter Your Email”/> <input type=”password” placeholder=”Enter Your Password”/> <input type=”submit” name=”Login Now”/> </form>   Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML Table. HTML Table element is used to show the table on the web page. Suppose you want to show Time Table on your web page in this case you can use Table element. Let’s check tags use to create a table in a Web page. We have four main tags to make a table on the web page. table tag: We use table tag to start and end table. tr tag: tr tag use to start a new row in a table every time to start tr tag it creates a new row in the table. th tag: In tr tag, we write th tag to add heading in table td tag: In tr tag, we write td tag to add data in the table. Example: <table border=”1px”> <tr><th>Student Name</th><th>Marks</th></tr> <tr><td>Ravi</td><td>85</td></tr> <tr><td>Sahil</td><td>90</td></tr> <tr><td>Kunal</td><td>75</td></tr> <tr><td>Sanjay</td><td>60</td></tr> </table> Output: Student Name Marks Ravi 85 Sahil 90 Kunal 75 Sanjay 60 Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML List. HTML list is normally used to show ordered or un-ordered list in HTML. For example, you want to show a list of available food items on a restaurant website. In this case, you can use HTML List. We have a total of three types of lists available in HTML. Ordered List UnOrdered List Description List Ordered List : In Ordered list, all the list items will be marked with numbers by default. Ordered lists start and ends with Ol tag and we write all the list items in li tag. Check this example. <ol> <li>Pizza</li> <li>Burger</li> <li>Sandwich</li> </ol> Output: Pizza Burger Sandwich Unordered List : In UnOrdered list, all the list items will be marked with dots by default. UnOrdered starts and ends with ul tag and we write all the list items in li tag. Check this example. <ul> <li>Pizza</li> <li>Burger</li> <li>Sandwich</li> </ul> Output: Pizza Burger Sandwich Description List : Description list starts with dl tag and after that, we use two tags dt and dd tags to add description title and description data respectively. <dl> <dt>Pizza</dt> <dd>250 Rs</dd> <dt>Burger</dt> <dd>110 Rs</dd> <dt>Sandwich</dt> <dd>100 Rs</dd> </dl> Output: Pizza 250 Rs Burger 110 Rs Sandwich 100 Rs Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML Images. We use an image tag to add images on the web page. To add an image in the web page we have to add an img tag and an src attribute in the img tag. In src attribute, we add the path of the image. This image path may be internal or external. Means image may be present on the same website or from some other website. Let’s check how to add image tag in HTML code. Here is code which shows how you can add an image(internal image) on the web page if the image and web page both are saved at one server( in single folder e.g Desktop of your PC) Internal Source Example: – <img src=”flower.png” height=”300px” width=”300px” alt=”flower image”/> External Source Example: – Here we will check how we can add the image from an external source. <img src=”https://images-na.ssl-images-amazon.com/images/I/71K8SKRk4gL._SX425_.jpg” height=”300px” width=”300px” alt=”flower image”/> Output: – Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com

In this tutorial, we will learn about HTML paragraph. HTML Paragraph element use to add a paragraph on the web page. Suppose you want to write about yourself like what kind of services your company provide on your web page. In this case, you can use the p tag to add paragraphs on your web page. Paragraph element starts and ends with the p tag. Here is a Basic example of HTML paragraph element. <p>Welcome to Owlbuddy. Here you can learn various programming languages.</p>   Parvesh SandilaParvesh Sandila is a passionate web and Mobile app developer from Jalandhar, Punjab, who has over six years of experience. Holding a Master’s degree in Computer Applications (2017), he has also mentored over 100 students in coding. In 2019, Parvesh founded Owlbuddy.com, a platform that provides free, high-quality programming tutorials in languages like Java, Python, Kotlin, PHP, and Android. His mission is to make tech education accessible to all aspiring developers.​ new.owlbuddy.com