2.0 Introducing HTML
One of the best ways to learn HTML is to look at other peope's code! So how does one do that?
All you have to do is position the mouse on the web page for which you want to view the code, then simply right-click and select "view source" (sometimes "View Page Source") from the pop-up menu. You can achieve the same thing by selecting "View" from the tool bar then selecting "Source".
However, that method won't show you all the source for sites that are coded to use "frames" (you will find out why in the "frames" section further on). So, get into the habit of using the right-click method (rather than view source from the manu bar) because that is the method that you need to use on web sites that use "frames" and if you get into the right-click habit now, you'll not get confused later!
So, use the right-click method to have a look at the source of this page now. You should see a new window open (either your text editor, or the source viewer window of your browser). The funny-looking stuff that you see is the source code of this page! There you go - you are actually looking at the code behind this page - the stuff that I wrote to make the page look like it does! This is the type of stuff I will teach you to write (or at least, not the content, but the code to display your content) in this tutorial.
Now resize the window, if necessary, so that you can still see this tutorial as you will need to refer to it! Now click back on the main page and the source code window will minimise. You will need to maximise it again to see it!
People like me who do web design have a dual-monitor set up to solve the problem of keep maximising windows. Two screens enable us to code (or see the source code) on one screen and see the browser (or the results of what we have coded) on the other screen. If you want to do a lot of web design and don't already have two monitors, I strongly suggest you fork out for two monitors as it will help you a lot! However, you'll need to be careful to ensure your graphics card can support it and that your monitors are compatible with the graphics card...
So, getting back to the source code in the window you've just opened... What you are looking at contains the HTML code that your browser parses - the posh programming word for "reads" - in order to "know" how to display this page in the browser window in terms of colours and layout, along with the actual text.
Have a closer look at the source code page and you'll see that, interspersed within the
text, there are bits enclosed within "less-than"
The "P" in
For now, the important thing to note is that the element part of a tag
So, now you can see that any text you want displayed should always have a start tag before it and an end tag after it as per the example below:
<p>These are a pair of HTML tags that contain elements that mark the start and end of this paragraph</p>
NEXT: So how dya actually build a web page with HTML tags / elements?