Sunday,November,25th,2012
HTML stands for Hypertext Markup Language which provides the basic structure for the web page.It’s like the bone of your body while CSS can be thought of as Meat.HTML contains different elements through which we can
create a framework of how our page is going to look like.These elements includes text,heading,div, table, list, photo. These are just a few and there are a whole lot more.We can use these elements to convert our ideas
into the web page.HTML is not a hardcore programming language that needs complex compilers or coding.we need to learn to use HTML tags which is not that hard.
Creating a first web page
1) First of all we need a simple text editor program. Notepad is a famous text editor if you are using windows.There is a new version of Notepad actually named as Notepad++ which contains a lot more features like syntax highlighting,zen coding,FTP integration, code-lining and many more.You may also use SUBLIME TEXT and CODA(not availale for windows to this date).You also need a browser. Chrome, Firefox,Internet Explorer ,Opera are famous browsers.
2) open up your favorite text editor and start coding.
<html> <head> <title>My First Web Page </title> </head> <body> <h1>Hello HTML, This is my first web Page.</h1> </body> </html>
3) Now you need to save this document.Naming is an important part. Name it anything like ‘firstpage’ but its extension should be html. So it should be ‘firstpage.html’ and save it inside a folder in your D:/ drive simply on Desktop. Now the icon image of the file should look like your default browser.If your default browser is mozilla then mozilla logo appears as your file. Double click the file to run and there is your first web page.
CSS (Cascading Style Sheets) is responsible for all the awesome visual layout, colors and design. CSS too is not that hard to learn but it certainly takes some time to feel comfortable. We are going to learn to use it right now.
Lets say you want to add some design to the previously created page.Follow these simple steps:
1) Create a new file using your favorite text-editor and name it anything you like but its extension or file-name should be .css .I am going to name it as “style.css” and I am going to place it inside the earlier created folder alongwith that “firstpage.html”.
2) Now inside “firstpage.html” we need to add a link to the css file. And generally this link is added inside the <head> tag of the page structure. So inside the <head> element place this code:
<link rel=”stylesheet” href=”style.css” type=”text/css”>
This is how we normally link a stylesheet with our html page. The ‘rel’ attribute stands for relation and since our stylesheet is in text format the “type” attribute is set to “text/css”.
3)Now start coding inside the “style.css” file
We want our background to look red and the text inside h1 tag must be uppercase.
body{
background:red;
}
h1{
text-transfom:uppercase;
}
4) Now run your page in the browser and it should reflect the changes you made.
In CSS what we do is we use the selector and inside the curly braces we apply style to the selector.Here body is a selector and bakground is an attribute of that selector and the value of the attribute is set to red.We can also specify hex value here. For example if you want background to look black then use a hex value of #000000. Remembering all hex value is impossible so you may use Photoshop or other online tools to get the appropriate hex values.
Well, I hope now you understand the very basics of how webpages are created. I will be posting some more stuffs later days. Bye for now.
I was looking for some html n css kick-start lesson and it is perfect. Thank you jhalak. Looking more stuffs for css .
I am going to have to keep returning again whenever my program load lets up however we am taking your Rss feed so i could read your internet offline. Thanks.