Thursday, April 30, 2020

html div margin vs padding

html div margin vs padding

Margin:

Html div margin and padding is most important topic in websites when we create a web  project then margin and padding is mostly use in html stylesheet. Margin help us to make a distance from browser to our web page we use margin for four sides of browser and web page. When we need one side or two sides margin then we can use as margin-top, margin-left, margin-bottom and margin-left and define in pixels use in CSS stylesheet px;

Padding:

Html Padding is use for internal distance. Suppose i write some thing in my div / division then i want to distance between div and paragraph or other typing tags i will use Padding. Padding is work in div in it is this is similar as Margin but margin effects on web browser and padding effects on content. I give an example with my codes.


<!DOCTYPE html>
<html>
<head>
<title>Html div tag</title>
<style type="text/css">
#div1{
background-color: green;
height: 400px;
width: 600px;
margin-top: 20px;
margin-left: 15px;
padding-top: 5px;
padding-left: 15px;
}
</style>
</head>
<body>
<div id="div1">
<p>this is my paragraph tag</p>
</div>
</body>
</html>

                                                                                ⇊⇊

html div margin vs padding


In this coding i use a div id div1 and in div a take a paragraph tag when i style this div margin and padding margin work with web browser and my div's green area get away from browser and when use padding that effects on my <p> Paragraph tag </p> and paragraph space from div when i apply margin-top and margin-left.

This is an example of difference between margin and padding  for more details you can watch my video below.



at No comments:

Tuesday, April 28, 2020

html div tag element

html div tag element

html div tag element is most useful tag in websites when we create a web page or website there are some tags that must use in website in these div tag is one tag that useful in web pages in web programming div is a division tag that separates one part of website from another part.

 Html div tag element start with <div> tag and end with </div> tag.
About this i give an example from my short document.


<!DOCTYPE html>
<html>
<head>
<title>Html div tag</title>
<style type="text/css">
#div1{
background-color: green;
height: 100px;
width: 200px;
}
#div2{
background-color:blue;
height: 100px;
width: 200px;
}
#div3{
background-color:red;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</body>
</html>

when we put these codes the browser will give the result like this Image:↴

                                                                               ⇊⇊
   
               
html div element has two catogeries "id" and "class" we use in this coding "id" id is specification of an element.

 For more detail you can watch my video on youtube  I clear html div tag element in this video.





at No comments:

Sunday, April 26, 2020

Html line break tag

Html line break tag


Html line break tag is use for space in between two lines that called <br> tag. if i write a paragraph and want space in lines i can use <br> tag such as i break the line and i will go in another line for example i type an small project for teach you.


<!DOCTYPE html>
<html>
<head>
<title>Html break tag</title>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type<br>and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially <br>unchanged. It was popularised in the 1960s with the release of Letraset 









sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</body>
</html>


                                                                  ⇊⇊
Html line break tag

Here you can see where i apply <br> tag there a line space but where i press enter key there no space because html not count enter how many time press it's work with own coding. 

for more example i publish a video on my Youtube Channel you can watch video and subscribe my Youtube Channel





In this video we are talking about line break tag <br> that is unclose html element that break in lines.
at No comments:

HTML Anchor Tag || Link Tag

HTML Anchor Tag || Link Tag


Html Anchor tag mostly use in websites. This link use in web page to connect another web page or a link of any marketing or download app link in these all purposes html anchor tag.
How can we write our html anchor tag? I give you a simple example of HTML Anchor Tag

in html file we can put anchor tag such as:

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

these a tags called anchor tag href means hyper reference that use for reference of another page or link of any website or app. Hyper reference =" " in this double quotes we type the link of our page or web address of website.<a href=""> must be type in these breases after this the name of your page or website or application  and close the anchor tag with </a> this tag


About this watch my video






In this video we are talking about Anchor tag in detail if you did not  understand about any topic of web designing or web development you can comment here or on my youtube channel link in above description.
at No comments:

Saturday, April 18, 2020

html introduction template

html introduction template:


Html is based for hypertext markup language. Html is a web language which is your for create a web layout or web pages. html is use for basic coding of web page. When we create a web page first use of html in this page you can see the coding of every website with these two buttons ctrl+u when you press ctrl+u you will see that website start with html opening tag <html> and end with html closing tag </html>. If you want to learn web designing or web development i prefer you that you must expert in html.

I have create a video on this topic on my Youtube Channel you can watch my videos on Html. In these videos i explain about html introduction and html template and how html work with webpage.
How can we use html codes in our websites.




at No comments:

Monday, April 13, 2020

internal css in html

internal css in html

we learn how to apply CSS on our web pages with some examples..

There are two types of CSS apply. First internal and second is external in this post we apply internal. 


<html>

<head>

<title>First project</title>

<style>

h1
{
color: white;
text-decoration: underline;
background: green;

}

</style>

</head>

<body>

<h1>First Post</h1>

<p>This is our first Paragraph</p>

</body>

</html>

see result:



in this chapter:-

 <h1> </h1> tags use for heading <h1> heading opening </h1> heading closing.
in style tag give color that mention and text-decoration that is underline and use paragraph tags <p> for paragraph.

   

                                   
at No comments:
Location: Karachi,Sindh,Pakistan

Sunday, April 12, 2020

Some HTML Tags

In this post we will learn more about html we run a program that will be helpful for our next programs.

<html>                                       {//html opening tags

<head>                                       //head opening tags


<title>                                        //title opening tags

First Post</title>                       //title closing tags

</head>

<body>                                        //body opening tags

<h1>                                           //heading opening tags 

My Fist Post</h1>                    //heading  closing tags

<p>                                            //paragraph opening tags

<b>                                            //bold opening tags

    This is my first html post.
 </b>                                               //bold closing tags

</p>                                                //paragraph closing tags

</body>                                           //body closing tags

</html>                                            //html closing tags}

In curley brases i mention tags that are opening or closing these tags are basics of html if you understood these tags you can work easily on html.
at No comments:

Start with basics of HTML

<html>

 <head>

 <title>First Post</title>

 </head>

 <body>

 <h1>My Fist Post</h1>

 <p> This is my first html post.</p>

 </body>

 </html>



↑
this result will appear in web browser.

at No comments:

Wednesday, April 8, 2020

Basic Introduction of HTML

HTML stands for hypertext markup language. its designed to write web page content



In this Image you can see some tags of html, as like <html lang="en">, <meta> <title></title><head></head>. 
These tags has some functions on it. Html can't be work without these tags. If you forget or ignore any text you can't run your file properly that has some errors on it.
<html> 
 its an opening tag of html. it's put on the begining of file in these two greater than and small than signs.
</html> 
 its  closing tag of html. it's put on the ending of file in  these two greater than and small than signs.
<head>  
it's an opening tag of head. it's a head of html document. It should be contain that element that can't be see in written language on web page. as like colors etc...
</head>
It's closing tag of head can't be written any type of head element after this tag after the head closing tag start a body tag.




at 1 comment:
Subscribe to: Posts (Atom)

css class

css class or html class: Class in html and css is a selector. We can define style rules based on the class attribute of the elements. Al...