Saturday, October 19, 2013

How to change the font-family, color, and font-size by using CSS.

Hey everyone,today we will learn how to change the font-family, color, and font-size by using css.
This is as simple as simple to learn as it was to change the background color of the page.
So let me give you a small piece of code in which you will see how we can change the or, and font-size by using css.

<html>
<body>
<h1 style="font-family:verdana;color:red;">Styling</h1>
<p style="font-family:arial;color:blue;font-size:30px;">how are you today.</p>
</body>
</html>

Just copy and paste this code and you will see how easy it is to work with CSS.
First I gave style to my heading,in which I defined the font family which i wanted,you can keep which ever you like.And then I defined the color of the text.
Secondly I styled my paragraph in the same way i did within the heading tag,the only additional thing you will notice here is the size of the text.
So this is how we can style our web content.



How to change the background color

Hey everyone how are you all today
Today we will learn about cascading style sheets (css),just the basics.

What Cascading Style Sheets (CSS) is?

It is a simple procedure for adding style for example fonts, colors, spacing to your Web documents.By using CSS you can change the font color font size,change the background color and do a lot more.

Lets start with the very simple code,in this example we will change the background color of the document.

<html>
<body style="background-color:blue;">

</body>
</html>
So what we did here is very simple,start with the html and body tag.Now as you know that the body tag defines the body of the document so we will write the background color of the document inside the body tag.
style="background-color:yellow;"
Style is used just to define that we are starting to style our web page and then equals to the keyword which is background-color: and after colon you write the name of the color you want in the background.So this is how we gave style to our document and changing the background color of the web page.




Define head tag,title tag,base tag,meta tag,script tag and style tag.

Hey everyone,today we will learn about head tag,title tag,base tag,meta tag,script tag and style tag.

<head> This tag defines the information about the document.This tag is usually placed beneath the HTML tag at the beginning.

<title> This tag defines the title of a document which means if you want to give a title to your page which it should display in the tab of your browser then you can give a name to your page by using this tag just write <title>Name of the page</title>

<base> This tag defines a default address or a default target for all links on a page

<link> This tag defines the relationship between a document and an external resource,you can place a link on your page so that when one clicks on it the browser opens up new page.

<meta> This tag defines meta data about an HTML document.

<script> This tag defines a client-side script.

<style> This tag defines style information for a document,if you want to use cascading style sheets (CSS) in your website then you can do the styling by using the style tag.


Monday, October 14, 2013

How to give font styles

Hey everyone how are you all today
The topic for today is how can we change the font style?

This is very very very simple guys you don't need to worry about it.After reading this post you all will be able to change font style like you do in your notepad etc.
So the 5 main font styles are

Bold: Your text will appear in bold,very much prominent 
Italic: Your text will appear in italic format.
strong: This is used for the text which for users to be aware that the written text is important
emphasized: This is also a format for users to understand as important.
code: Text will appear as the output of the computer.
<html>
<body>

<p><b>Text will appear in bold</b></p>
<p><strong>Text will appear as strong</strong></p>
<p><i>Text will appear in italic</i></p>
<p><code>This is the format how the computer gives the output</code></p>
<p><em>Text will appear as emphasized</em></p>


</body>
</html>


Very simple guys,just open the html and body tags,give the paragraph tag,because your will be writing a paragraph,you can also style headings in the same way.
now give the tags and write the sentence <b> hello 
</b><b> is for bold
<i></i> is for italic
<em></em> is for emphasized.

I hope you don't have any problems yet.If you do have any questions please do ask.


Sunday, October 13, 2013

How to add an image.

Hey everyone how are you guy
Our today's topic is adding images to your website.This is very very simple people,you can add as many images as you want to and they will appear perfectly and with the same picture quality as they are stored in your desktop.So lets get started with the code.

<html>
<body>

<img src="car.jpg" width="100" height="132">

</body>
</html>

Ok so above i wrote the code of adding an image to a website,let me explain it to you guys briefly.

Step 1: Open html tag
Step 2: Open the body tag
Step 3: Write img which means image,write src which means source so these 2 short forms makes a sentence which can be understood as image source.Then in the inverted commas you will have to give the name of the image which you have named it in your laptop/PC, put a full stop and define the type of the image,close the inverted commas,define the width and height of the image and your are done with the task of adding the image.See how simple it is to add an image,now you can add as many images you want to add with the same procedure.
Step 4: Close the body tag
Step 5: Close the html tag


Saturday, October 12, 2013

How to give hyperlink in html

Hey everyone our today's topic is the <a> tag.

Q:What does <a> tag do?

Ans: This tag is used for giving link,say for instance if you want to make a home page where you will write information about your website and you want to make another page for providing your contact information so that when the user clicks on the home page it should open a page where there is information about your site and if the user clicks on the contact page it should contain the contact information.This can be done by using the <a> tag,this tag is used for creating a page where user can click and open up a page,this tag can also be used for providing other things as well,like if you want to put a document on your site so that when user clicks on it the user can download that document.So guys the purpose of <a> tag is to give a link.

Lets get started with the code.Now friends for giving links on your website all you need to do is open up the <a> tag put the URL of the page your want to open when clicked on it,give a name to the page so that it is visible and understandable for the users and close the tag.Below i am writing a small piece of code and i will also explain it line by line after i am done writing it.


<html>
<body>

<a href="https://www.google.com"> Google</a>
<a href="https://www.facebook.com">Face Book</a>
</body>
</html>

So friends what i did in this code is first i opened my html and body tags,opened up the <a> tag,gave 2 links of the famous and well known sites,put a name to it and closed the tag </a>,and at the end i closed the html and the body tag.
When you will click on Google the browser will load the google page,and if you will click on facebook the browser will open the facebook log in page.Now let me give you guys a little demo of how this code works.






Friday, October 11, 2013

How to write paragraph in HTML

Hey everyone :) today we will be learning how to write content in your website.For example if you want to write a paragraph on your web page you can easily write one after you read this post :)
So lets get started.In order to write a paragraph in HTML you just need to memorize this tag <p> :) .Below i am writing a small piece of code and you can easily understand this as well because it is very mush similar with the heading tag,i will also explain this code line by line at the end :)

<html>
<body>

<p>Hey my name is konain and i am a blogger</p>


</body>
</html>

So friends first of all we have to give the HTML tag which is to define that we are writing a code in html,after that you give the body tag which means you will be writing something inside the body.Now you will see the <p> tag p stands for paragraph and you can write any thing you want inside the <p> tag and you will have to close it as well after you are done writing your content :)