Saturday, October 8, 2011

Dave Ragett's HTML: A shortcut


For those of us who are not proficient in HTML, it really looks like a big mess. How in the world can we learn all this code? But on further inspection, it's really not that hard. In fact, you don't need to know any HTML code at all to be able to write HTML.

If you see something on a web page that you like and want to include it on your own page, just look at the source code. To do this, all you really need to know is Dave's trick: click on the “View” menu, then on “Source”. There are enough words in plain English on the source page to guide you to the code you're looking for.

Let's take Dave's site for an example.


Suppose you like the way Dave made his photo a link to his home page. Open up the source file and take a look at the code. HTML code starts at the top left corner of the page and continues left to right, top to bottom, so you can safely assume that the code for Dave's photo will be close to the top of the HTML document.

As you scroll through the HTML, you will notice phrases that you can see on the actual web page (highlighted here in red).

<body bgcolor="white" text="black" background="book.jpg">
<p class="navbar"><a href="http://www.w3.org/"><img alt="W3C" width="72"
height="48" border="0" src="http://www.w3.org/Icons/w3c_home.gif"></a><br>
<a href="Advanced.html">Advanced HTML</a> | <a href="Style.html">Adding a
touch of style
</a></p>
<h1><a href="http://www.w3.org/People/Raggett"><img src="dsr.jpg"
alt="Dave Raggett" align="middle" border="0"></a>
&nbsp;&nbsp;Getting started with HTML</h1>
<p><em><a href="http://www.w3.org/People/Raggett">Dave Raggett</a>,
revised 24 May 2005.</em></p>

Now you know you're in the right section of the code. We can narrow it down even further, since we know that the image is between "Adding a touch of style" and "Getting started with HTML".

We need to know that the start of a command is written like this: <a>, and the end of the command is written like this: </a>. The actual text might differ, but the brackets will look the same. Look for that part of the code that surrounds the command involving a photo - probably a .jpg file.

<a href="http://www.w3.org/People/Raggett"><img src="dsr.jpg"
alt="Dave Raggett" align="middle" border="0"></a>

Now, just copy this part of the code. Replace Dave's web address, image file name, and image title with your own. Drop it into your HTML document or blog, and save. Then you can forget about HTML until the next time.

No comments:

Post a Comment