Parvesh Sandila - Owlbuddy

CSS Colors

Parvesh Sandila / February 6, 2021

In this tutorial, we will learn about CSS colours. CSS colors are use to mention colors for HTML elements. For example, you want to set the colour of paragraph element or you want to set the background colour of a specific portion of the web page. In CSS we can define the colour for different HTML elements using the Color name, RGB, HEXA, RGBA, HSLA values. There is a total of 140 standard colour names like black, blue, green etc. which you can use in CSS. Click to check colour names. Check This example using standard colour names. <html> <head> <style> h4{ color:red; font-size:25px; } .frame{ border:1px solid green; border-radius:10px; padding:10px; } </style> </head> <body> <h4>This is H4 Tag</h4> <p class=”frame”>Hello This is P Tag</p> </body> </html> Defining colour using HEXA value: We can also define the colour of the HTML element in CSS using Hexadecimal values. click to check Hexa Values of colours. Example using HEXA Values: <html> <head> <style> h4{ color:#56A5EC; font-size:25px; } .frame{ border:1px solid #79BAEC; border-radius:10px; padding:10px; } </style> </head> <body> <h4>This is H4 Tag</h4> <p class=”frame”>Hello This is P Tag</p> </body> </html> 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

CSS Colors Read More »

CSS Measurement Units

Parvesh Sandila / February 6, 2021

In this tutorial we will learn about CSS Measurement Units.CSS Measurement units are used to mention the size of HTML elements in the web page like to mention text size of paragraph element or height and width of image elements. CSS support number of measurement units. Please check the list of various Measurement units below. List of available measurement units in CSS: Unit Description Example % Use define element measurement in % heigth:50% cm Use to define element measurement in Centimeters height:10cm px Use to define element measurement in pixels height:50px em Use to define relative measurement for the height of a font in em spaces height:15em ex Use to defines a measurement relative to a font’s x-height. height:10ex in Use to define element in measurement in inches. height:1in mm Use to define element measurement in millimeters height:50mm 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

CSS Measurement Units Read More »

CSS Selectors

Parvesh Sandila / February 6, 2021

In this tutorial, we will learn about the CSS selector. CSS Selectors are use to select and style HTML elements. There are various ways to select and style HTML elements you can select HTML elements with the tag name. For example, you want to style H1 tag in your web page when you with style (like you change the text colour to RED) it using tag name all the h1 elements in your web page will automatically adapt that style. Furthermore, there are various other ways to select HTML elements with we will discuss in this tutorial. Ways to select HTML elements. Based on Tag Name Based on Class Based on ID Universal Selector Based on Tag Name: This type of selector work on similar kind of elements. For example, if you change the colour of h4 element using this selector it will change the colour of all h4 elements in a web page(in case of internal CSS). check this example below. <html> <head> <style> h4{ color:red } </style> </head> <body> <h4>This is H4 Tag</h4> <h4>This is H4 Tag</h4> <h4>This is H4 Tag</h4> </body> </html> Based on Class: To use class selector we use a special class attribute with HTML elements. With the help of class selector, we can select a specific HTML element at a single time. For example, you have a total of five h3 elements on the web page you want to change the colour of first and last h3 element we can do this with the help of class selector. To mention the class selector we write. followed by class name in CSS. Check this example. <html> <head> <style> .heading{ color:red } </style> </head> <body> <h4 class=”heading”>This is H4 Tag</h4> <h4>This is H4 Tag</h4> <h4 class=”heading”>This is H4 Tag</h4> </body> </html> Based on ID: To use id selector we use id attribute with HTML element. Id selector is used for a specific element in the web page. To mention id selector we write # followed by id name in CSS. Check the following example. <html> <head> <style> #mainHeading{ color:red font-size:28px; } </style> </head> <body> <h4 id=” #mainHeading”>This is H4 Tag</h4> <h4>This is H4 Tag</h4> <h4>This is H4 Tag</h4> </body> </html> Universal Selector: This universal selector affects every element of the web page. To mention universal selector we write * in CSS file. Check this Example. <html> <head> <style> *{ color:red font-size:15px; } </style> </head> <body> <h4>This is H4 Tag</h4> <h5>This is H4 Tag</h5> <h6>This is H4 Tag</h6> </body> </html> 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

CSS Selectors Read More »

Types Of CSS

Parvesh Sandila / February 6, 2021

In this tutorial, we ill learn about Types of CSS. I hope you would have a clear idea about how CSS works and How we can use it to design our web pages. CSS types are divided according to where we write CSS code (physical placement of code). We have three kinds of CSS. Inline CSS Internal CSS External CSS Inline CSS: In the case of inline CSS. we write CSS code with HTML tag as an attribute. But the noticeable if you write CSS with one HTML tag it would not affect other Tags. Example of Inline CSS: <h4 style=”color:red”>This is H4 Tag</h4> <h4>This is H4 Tag</h4> As you can see in given example here I am applying inline CSS only on one h4 HTML tag and in this case CSS effecting to h4 tag where I mention CSS. But suppose you have 10 times h4 tag in your web page and you want to set the text colour of each h4 tag as red ut means you have to write inline CSS 10 times for each H4 tag. That will be so boring and time-consuming. But don’t worry we have our next CSS Type to overcome this kind of problem which is known as Internal CSS. Internal CSS: In case of internal CSS, we write style for the same kind of tags, for the tags with the same class selector or tag with an ID selector just single time in the Style tag. For example, if you have five h3 tags in your web page and you want to set the text colour of each h3 tag as red. To do this you have to write style for all three h3 tags just once. Example of Internal CSS: <html> <head> <style> h4{ color:red } </style> </head> <body> <h4>This is H4 Tag</h4> <h4>This is H4 Tag</h4> <h4>This is H4 Tag</h4> </body> </html> You can see in the given example in case of internal CSS we can mention the centralized style of all same kind of tags once in a web page. But if you are defining style in internal it would not make any impact of the other pages of the website for example here we changing the colour of h3 tag in a single page all the other pages of website would take default colour of h3 tag. External CSS: Using External CSS we can create a centralized style sheet for the whole website. In case of internal and inline CSS, we were integrating CSS code in HTML. But in case of the external CSS, we create separate CSS file with an extension of .css. After creating this separate CSS file we link this file with HTML code where we want to apply that style sheet. Syntax to link CSS: <link href=”style.css” type=”text/css” rel=”stylesheet”> 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

Types Of CSS Read More »

HTML Quotation

Parvesh Sandila / February 6, 2021

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

HTML Quotation Read More »

HTML IFrame

Parvesh Sandila / February 6, 2021

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

HTML IFrame Read More »

HTML Colors

Parvesh Sandila / February 6, 2021

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

HTML Colors Read More »

HTML Comments

Parvesh Sandila / February 6, 2021

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

HTML Comments Read More »

HTML Form

Parvesh Sandila / February 6, 2021

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

HTML Form Read More »

HTML Table

Parvesh Sandila / February 6, 2021

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

HTML Table Read More »