As I was putting together my home page, I noticed that things had changed considerably with Hyper Text Markup Language. Things progressed to HTML5 which although similar, does appear somewhat easier. There also has been a number of changes in the associated format code Cascade Style Sheet or CSS. Having started out many long years ago, I do not care for the use of external libraries and links to package that I am not necessarily familiar with. It tends to either bloat my product unnecessarily or add a questionable degree of security to the result.
In the end I figured that I would like to convey some of the things that I picked up and some things I changed along the way. First of all there is the fact that I did not want to use some web page generator for the home page content and design; but I did want to use as much preexisting material as I could. I tend to learn best by taking something and poking around with it until I get what I want. That way I don't end up reinventing the wheel; but I learn by the process of trial and error. For instance, this particular HTML page was input using OpenOffice Writer; but I did use the Source View at the beginning to assure that what was inserted was all familiar and understandable.
Probably the greatest source and best starting point is the W3 Schools tutorials on HTML. I would probably advise to start with HTML5 at this point, It is easier and you can always backtrack if you like.
The best place to start is with the linked document that appears under the photo button list item “At the Pond”. It is composed of an older style start and a title. It is always good to have a title so that it will appear in the browser tab. It has the form:
<!DOCTYPE
html>
<html><head>
<title>The
Pond</title>
<head>
<body>
Next is an H1 header, that is largest of the Headers, a paragraph denoted by the <p></p> with a line break caused by the <br>:
<h1>Pine
River Pond</h1>
<p>Pine River Pond is a beautiful
spot near the "Lakes Region" of New Hampshire.<br> I
have been lucky enough to own a spot on a quite cove there for over
30 years. Now that I am retired, my wife and I spend a lot more time
there. It has been a great place to seem my boys and now their
children swim, fish, boat, and all the great things that this setting
affords them.</p>
After that is the code for some pictures, another bit of text inserted as a paragraph and another picture that contains a map:
<img
src="prp1.jpg" alt="Prp view 1"
style="width:25%">
<img src="prp2.jpg"
alt="Prp view 2">
<img src="prp3.jpg"
alt="Prp view 3" style="width:25%"> </p>
The pond is long and narrow as you can see from the map:</p>
<img
src="prpmap.jpg" alt="Prp map" style="width:45%">
The img src is of course the image source and denotes where the file is located. In case a particular browser has trouble handling the image it is always wise to include an alternate text description, which I am sure you guessed is the alt. Included in each entry is a style attribute. There are a great number of attributes to choose from; but here I only need the width to accommodate the pictures. That was the entire code for that page. Your browser should be able to show the source code of the page you are viewing and if you look around in the tools, or maybe just click the right mouse button you should be able to view that page and verify what I have just described.