Opera Browser, Inspect Element

This is just a nice tip for people who are learning HTML. If you have been using any other browser. You might be aware that right clicking on any page and clicking on “View Source” or “Page Source” or any of that kind will give you the HTML source code of the page. But what i don’t like about all those tools is that it gives you a very awkward representation of the code. Some times you will not know where to begin with.

But Opera has this amazing tool which i found only recently. Its the “Inspect Element” Tool. Right click on any page and click on “Inspect Element”, you will see the page split into two vertical segments. The bottom one being the source code of the page which is sorted out. Snapshot is below so you can get a picture of how it looks like.

image

The feature i like about this is

1. All the code has been sorted out just like how you would see it in a professional HTML editor.

2. After you click on “Inspect Element” you get into this ultra cool mode, where you can click on anything in the browser window and this lower tab will take you to the particular piece of code that is responsible for that. Awesome right!?

This is just for a start. Once you go deep into this you will see that you have lot more options to analyse a webpage. I’m in that process now.

Thank you.

Comments are welcome..

Advertisements

Making HTML Pages

I have given you the source code for some basic HTML i have written but have not specified how to make them, in the sense, where to type them and how to save them and how to open them. 

So for HTML you do not need any sort of compiler that you need for stuff like C, C++ or Java for that matter. 

A Notepad will do. 

How a notepad.?

All you have to do is copy and paste the code i have given in the other blog posts and ‘Save as’ … <filename>.html
That is just save it with a ‘.html’ filetype.

So if you want your file to be named ‘testpage’ then save the page as, ‘testpage.html’

Hope i was clear enough

For linux users, you can use Gedit. or Kedit, which ever you have. 

Why not High-End Softwares

People usually go for high-end softwares for making webpages. Softwares such as Adobe Dreamweaver. But for learners it is recommended that only notepad be used. Reason for this is, when you learn, you need to learn the real thing. High-end softwares can do a lot of work for you and they do correct mistakes themselves if you will. So that pulls you back on your road to learn HTML properly. 

P.S: If you want something a little more powerful than notepad on windows i suggest you download notepad++. Its opensource so you can download it for free on the internet. Search Google. I assume that most linux users will be satisfied with G-edit or K-edit.

 Thanks for reading.

Comments and doubts are welcome. 

Tc. Joys. See ya

Using Forms in HTML (Sample Webpage #1)

This is a Simple web page created using forms made mainly for you to copy and paste it and play around with the tags so that you can learn a bit more about HTML. Be bold to delete, edit and replace stuff in this code. Thats the way to go.

This is a form to take info about people participating in an interview. This could be used as an online registration form or anything you want it to be called.

Try it out!..

<html>

<head>
<title>Off Campus Entry Form</title>
</head>
<body>
<h1>
Off Campus Entry Form
</h1>

<form name=”input” action=”index.html” method=”get”>
Name: <br />
First name: <input type=”text” name=”firstname” /><br />
Last name: <input type=”text” name=”lastname” /><br />
<br/>
Gender: <br />
<input type=”radio” name=”sex” value=”male” /> Male<br />
<input type=”radio” name=”sex” value=”female” /> Female<br />
<br/>
Email id: <input type=”text” name=”email” /><br />
<br/>
Languages Known:<br/>
<input type=”checkbox” name=”lang” value=”C” /> C<br />
<input type=”checkbox” name=”lang” value=”C++” /> C++<br />
<input type=”checkbox” name=”lang” value=”java” /> Java<br />
<input type=”checkbox” name=”lang” value=”.net” /> .Net<br />
<br/>
Field:<br/>
<input type=”radio” name=”field” value=”arts” /> Arts and Science<br />
<input type=”radio” name=”field” value=”engg” /> Engineering<br />
<br/>

Qualification:<br/>
<input type=”radio” name=”qualification” value=”ug” /> Under Graduate<br />
<input type=”radio” name=”qualification” value=”pg” /> Post Graduate<br />
<br/>

<input type=”submit” value=”Submit” />
</form>
</body>

</html>

Post your doubts.

Thank you.

Joys

Simple Web Page

Here’s the code for a simple web page i created to start off with. Though this is really really basic and when i say really its REALLY basic. This would help in understanding what each tag does. Take a trip around w3schools.com HTML tutorial and come back here and you can play around with the tags and see what each one does.

<html>
<head>
<title>
J Cafe
</title>
<style type=”text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>

</head>

<body>
<h1>
Welcome to J Cafe
</h1>

<p>
You’re in for a real treat…. Take a look at our exquisite menu..
</p>

<h2>
THE MENU
</h2>

<h3>
House Blend, 80 /-
</h3>
<p>
A smooth blend of coffee from mexico and Bolivia
</p>

<h3>
Mocha Cafe Latte, 75
</h3>
<p>
Expresso, Steamed milk and Chocolate Syrup
</p>

<h3>
Cappuccino, 70
</h3>
<p>
A mixture of Expresso, steamed milk and milk foam
</p>

</body>
</html>

Post your doubts. Will answer them if i can. As soon as possible. Thank You.

Learning HTML

As a part of my course work, I’m supposed to learn HTML, XML and Javascript. So you can be expecting some posts about that too here.

Learning HTML would be the easiest thing i guess. Log on to w3schools.com and you will have everything you need to get going. In about one hour or so. You will have learnt enough to make your own website. The site also allows you to test out the things that you have learnt side by side, with some workspaces. This would be one way to go about it. This is how i first learnt it few years back and i’m going through it again.

So anyways. There are plenty of good books out there which you can use to learn too. A particular one that I am using now as a reference is this book called “Head First – HTML (with CSS & XHTML) written by Elisabeth and Eric Freeman, published by O’Reilly Publishers. This would be a good read if you want to take a dive into HTML. It will get you starting in no time and to add more. The book is awesome. You can read it as though you were reading a story book but really you would be learning a lot too.

Tc

Joys