Simple Web Page Components

The 4 Most Useful Core Components
  1. HTML <p> Tag ~ create paragraphs
  2. HTML <h1> to <h6> Tags ~ create headers
  3. HTML <a> Tag ~ create a hyper link
  4. HTML <img> Tag ~ display an image

HTML <p> Tag

The paragraph is the main component of all documents. On a webpage paragraphs are contained within the "p" tags which look like this: <p>paragraph</p>

If you were going to write a page with say 6 paragraphs, rather than remembering how to open and close the paragraph with its proper "p" tag, you could simply copy the example in red above and paste it into your text editor 6 times like this:

paragraph

paragraph

paragraph

paragraph

paragraph

paragraph

Then simply select the word paragraph between the first "p" tags and type your first paragraph, and so on until your final paragraph was typed.

HTML <h1> to <h6> Tags

You could theoretically write a complete novel and publish it online with only knowing the "p" tag. However, it may be useful to add your novel title, chapter, and section headings as necessary or desired using any or all of the 6 header tags provided by html like this:

<h1>the "h1" tag</h1>

<h2>the "h2" tag</h2>

<h3>the "h3" tag</h3>

<h4>the "h4" tag</h4>

<h5>the "h5" tag</h5>
<h6>the "h6" tag</h6>

Notice the headers consistently get smaller with h6 being the smallest.

Using just the "p" tag and the "header" tags will give your writing universal appeal if the content is appealing

Adding more zip and zing!

HTML <a> Tag

The "a" tag also often referred to as the "anchor" tag

The "a" tag is what makes the internet so dynamic allowing the creation of hyper links that that quickly allow you to go to different content provided elsewhere on the world wide web. This is can example of how the "a" tag is used to create a hyper link: <a href="URL">hyperLink</a>

So, what is a "URL"? You can click on URL inside the above "anchor" tag example to read all about it. You can also click: W3Schools HTML <a> Tag Reference. I am a huge fan of w3schools with their clear and precise reference and educational material.

HTML <img> Tag

The "img" tag

When an image is worth a thousand words, there is nothing like the internet for making them available:

The basic "img" tag looks like this:<img src="pathToImage/fileName.extension" />
The actual "img" tag used to display the winter cardinal looks like this:

<img src="images/cardinal.jpg" />

It is a common practice to keep all image files for a webpage in a subdirectory named "images" just inside the directory for the page using the images. This practice makes it easier finding things in both directories especially when you have quite a few images.

NOTE:

In a Nutshell if you choose to use images:

  1. Be considerate of copyright.
  2. Resize images to a size appropriate for web use.
  3. Use only relative image paths unless you have a very good reason not to do so.
  4. The "src" attribute of the <img> tag is the only one you really have to be concerned with.

You can stop here and be good to go!

However, if you plan on using images on your pages the following can be useful and in some cases necessary and worth your while to take the time and review.

More thoughts on using images...

  1. Be considerate of copyright.
    • Only use your own images, or images in the public domain, or images with a Creative Commons license, or images you have purchased the right to use, or images you have gained permission from the legal copyright holder to use.
      • Why? It would be a shame to write that next best seller and finally realize your wildest dreams of forever more being financially independent only to have a legal copyright holder of an image you used to show up out of the blue and claim the lion's share of your new found wealth.
    • If you use an image with a creative commons license, besure to correctly attribute the image according to the license provided.
  2. Use only relative image paths unless you have a very good reason not to do so.
    • The image above is made with a relative link, i.e. it exists in a subdirectory of the directory that contains this webpage file.
    • The image below is made with an absolute link, i.e. it exists in a directory on a completely different webpage:
      ...and thus has the URL of the webpage inclued in the src path.
    • It looks like this:
      <img src="http://www.davidbrobert.com/H500RMH.png" />
    • Why? Images can use up a lot of bandwidth of the site hosting the image and is considered poor web etiquette because:
  3. Resize images to a size appropriate for web use.
    • The modern iPhone and other digital cameras render very large image files normally suitable for printing.
      These large files:
      1. Take up a lot of disk space.
      2. Take up a lot of bandwidth when hosted online.
      3. Are considerably larger than images need to be for pleasant viewing on the Internet.
    • If you use images on your webpages you should:
      1. Resize them appropriately in a photo editor of your choice.
        • Unless you have a reason for a different size, typically a width of 800 pixels works well.
        • I like "Photoshop Elements" which is considerably cheaper than the full blown photoshop and has more than met my needs for the occasional edit that would not justify the cost of "Photoshop".
        • There are other alternatives available including free and also online. Google can help you to find one if you don't already have one you like.
    • Extremely large images can take a long time to load and render causing a diminished user experience.
  4. W3Schools.com is once again an excellent reference for the HTML <img> Tag
    • If you look at w3schools "img" tag reference you will notice more tag attributes used than shown above.
    • The "src" attribute shown above is the only one that is absolutely necessary. So, you do not have to be overly concerned with the others unless a specific need arises.
    • After the "src" attribute, the "alt" attribute is the next on most appreciated especially when your site is viewed by the visually impaired. It is considered a common courtesy to use the "alt" attribute with your images however failing to do so is not as egregious as using images that violates someone's copyright, using extremely large images, or hotlinking images.

In closing, learning about web development can be never ending. However, life can be extremely busy with other interests easily taking precedence. The main thing is that this should be easy and enjoyable.

Just knowing how to use the 4 most useful core components shown above will allow you to present the most important aspect of the webpages you create, and that is your content!