Creating Web Documents

Basic HTML

Concepts

HTML elements

Once you have the concept of the structural elements in a file as we saw in the Hello, World lesson, all you need to do is discover new kinds of elements to put in HTML files. For example, the UL element is the unordered list element. Used with the LI (list item) element to identify the individual items in the list, you can make unordered lists of things. Here is an example; notice that I left off the optional end tags of the LI elements:

Put this in the BODY of your HTML file: Displayed in a Web browser, it will look something like this:
Groceries to buy:   <UL>
<LI>Ham <LI>Catfood <LI>Pancake mix </UL>
Groceries to buy:
  • Ham
  • Catfood
  • Pancake mix

HTML syntax

Each HTML element has a particular syntax. In using HTML, realize that HTML is a markup language, a language intended to markup (or identify) the logical components (for example, paragraphs, headers, lists) of a document. HTML is not meant to specify precisely how the contents of your document appear in a Web browser.

The World Wide Web Consortium coordinates standards for HTML syntax. By sticking to standard HTML, you'll have the best chance to create Web documents that are accessible by the widest variety of devices (not just Web browsers on computers, but cellphones, handheld devices, text-only browsers, and the wide variety of ways to access the Web that are emerging).

Parts of a Basic HTML Web document

Here is a basic "Basic HTML" document.

The characters enclosed by the <!-- and --> are comments and will not be displayed in the Web browser (but are viewable in the source).

<!-- This is a comment. -->

You can see that, aside from what we saw in the "Hello World" document, we have the following HTML elements demonstrated:

Further demonstration of basic HTML elements

Here is another example of HTML elements that you can put in the BODY of your HTML file. Notice that I left off some of the optional end tags of the elements.

Put this in the BODY of your HTML file: Displayed in a Web browser, it will look something like this:
<!-- comment: put daily duties here. -->
<P>I have <STRONG>many things</STRONG> to do:   <IMG src = "https://johndecember.com/html/images/icon.gif" align="right">
</P>
<UL>
<LI>Fix the station
<OL>
<LI>Recover the satellites
<LI>Fix the air leaks
</OL>
<LI>Help crewmates </UL>
<HR>

<!-- I know I'll need some tools. -->

<P>
Here are the special tools I'll need:

<DL><DT>spanner<DD>a kind of wrench
<DT>go-go bar
<DD>a kind of bar used to open the hatch </DL>

<P> The <CITE>Mir Manual</CITE> says: <BLOCKQUOTE>
Don't press the go-go bar against the portholes. </BLOCKQUOTE>

I have many things to do:

  • Fix the station
    1. Recover the satellites
    2. Fix the air leaks
  • Help crewmates

Here are the special tools I'll need:

spanner
a kind of wrench
go-go bar
a kind of bar used to open the hatch

The Mir Manual says:

Don't press the go-go bar against the portholes.

Exercise: Increase your Web document's complexity

Add to your "Hello World" HTML document by putting in some elements from the "Basic HTML" document and changing the content to suit your interests.

search Search · star Market
2023-06-19 · John December · Terms © johndecember.com