Beginning to Learn HTML

HTML writing can be simple if it includes only enough style to have margins, paragraphs, perhaps some links, and possibly an image that may not approach what the writer saw in imagination, but few people are satisfied with this approach for long. These examples go beyond that simple approach although the first few start with very basic concepts. I have attempted to show how to use each element I address.

Although everything in these examples can be found on various websites, much of it in the web pages of w3schools, finding what you are looking for on those websites that I have visited may be like searching for a needle in a haystack. Lessons on w3schools site are certainly worthwhile if you start with the first lesson in their tutorials and work through them in sequence.

Styling an Element

The element to be styled is a div in this example. Try first with nothing specified except a height of 300px or whatever you wish to set it, a width of 50% (or another percentage) or a width in pixels, and a background color. This is all that is necessary for an element or area in the body although you will usually want more.
Style:
margin-left: auto; margin-right: auto;
width: 50%; min-width: 300px;
background-color: Lightblue;
height: 300px;

A div is defined as an HTML tag. A very good explanation and some examples of HTML tags can be found at this site. If you are just beginning to style and code HTML, you will not understand parts of the discussion, but ignore those for now. You will learn as you do more with HTML and style sheets.

These paragraphs and the opening paragraphs are outside the div and are not part of the example.

The height of the blue area is specified as 300 pixels. Setting the left and right margins for the div as auto will center the element horizontally. Either or both could be set to specified values in percentage, pixels, measured length, etc., and setting the width as 50% and the min-width to 300 pixels means that the the blue element width will be half of the screen width unless 50% width is less than 300 pixels as is likely on a smart phone, in which case the blue area will be 300 pixels wide. This example is not formatted to show well on a narrow-screen device.

Note that there is no space around the text in the blue div and that the blue area takes up more vertical space than the content needs. Differentiating the style section from the other text would likely make it more readable. A slightly different version of this example that makes these suggested changes can be seen here.

This link will take you back to the page on which you can find links to the some of the basic concepts of styling HTML.