As a website developer, I take the path less chosen: if my clients want or need to learn how to code, I teach them how to code.
When Website Systems Don’t Make it Easy to Add Pages
Many website tools, such as WordPress and other Content Management Systems, make it fairly easy (in comparison to other systems) to add new pages and do minor layout tasks. Other systems, especially those specializing in shopping cart software, have tools that are so frustrating, it’s easier just to go to code.
The Jared Caldwell, owner of Ohio Woodlands, uses Shift4Shop, formerly 3D Cart, which fits in this category. This is a shopping cart specific web service, similar to Shopify. Testimonial Pages are an important part of his website, but it’s just quicker to build them in code that to use their WYSIWYG tool. Over the years, I added new testimonial pages, but now he is interested in doing that task himself. So, we will have a little HTML lesson!
Adding Page Content to the Basic Structure
Most of the work to build a webpage is done in the body area. So, the following instructions will assume that the <body> </body> is already there.
There were two choices of structures (tags) for Jared’s Testimonial pages, 1) layers and, 2) lists.
What Is a Layer?
A layer is like a container that holds a block of your content. In this case, we would want each testimonial in its own layer. The screenshot on the right shows the current layout of the testimonials. Each testimonial takes a full row, but is the height of the testimonial itself.
If we use the layer option, we would use <div></div>. Each <div> </div> would contain a title, a description and a photo.
What is an HTML List?
A list is repeating information. Traditionally, a list is for short phrases or words, such as a shopping list, but lists on websites often contain larger pieces of content that are all in the same topic and format.
The tags for a list have two layers of tags. The first tag is either <ul> </ul> or <ol> </ol>. <ul> is for unordered (bulleted) list. <ol> is for ordered (numbered) list. The second tag is <li></li>, which is “list item”. By default, your choice of <ul> will put a bullet next to each <li> and <ol> will put a number next to each <li>.
The code for lists can have other elements inside them.
<p>Solid hardwood dining table project featuring Ohio WoodLands Part #X-217 table legs.</p>
<p><img src=”https://www.ohiowoodlands.com/assets/images/2020/NewYorkTableLegsProject.jpeg” /></p>
Quite often, as in this case, you can also add CSS code that will make the bullet or the number not show. Notice on the screenshot that there are no numbers next to the title on each of the testimonials in the screenshot. No matter how the viewer sees it, the structure is a list. CSS is a totally different language from HTML. HTML adds elements to the page. CSS formats those elements.
Notice that the second and third line inside the <li> have <h2> and <h3>. These “h tags” help show the information hierarchy of the site. There is also an <h1> tag on the page, but each page should only have 1 <h1> because it is the title of the page. It signals to Google what the page is about. For this page, the <h1> is on the title: 2020. So, the title of the individual testimonial, and the further information about the source of the testimonial are in <h2> and <h3>, showing the hierarchy of the content.
Paragraph tags <p></p> mark a basic paragraph. These tags tell the browser that this is basic text content. In the case of the image <img>, I also put a <p></p> around it because the Shift4Shop coding sometimes adds unwanted additional code around images. The simpler the code, the easier it is to manage and the less likely it is that there will be additional problems.
The Image Tag
Unlike the other tags that have an opening and a closing tag, such as <h1></h1>, images have a single tag that has all the pieces as property. There is no text to add between an opening and closing tag. Instead, and image tag has the <img, which tells the browser that it needs to load and image address, in this case “https://www.ohiowoodlands.com/assets/images/2020/NewYorkTableLegsProject.jpeg”. The image address is a “property. The src is the name of the property.
Note that normally, you don’t add <p></p> around an image, but in this case, it’s there to overcome a peculiarity of Shift4Shop. It’s not uncommon to have to work around idiosyncrasies of a technology.
The Basic Structure that Holds a Web Page Together
With systems like Shift4Shop, the site owner or developer adds only the code that goes into the content area for that page, such as a testimonial. The full code has a basic HTML structure around that specific content. Knowing that structure doesn’t help the task at hand, but here it is, as a matter of interest and for other technologies where you do need to add it..
- HTML stands for HyperText Markup Language.
- While HTML is a coding language, it is not a programing language. As a markup language it’s only purpose it to tell a browser what elements to put on the screen. Word processors also their own markup language.
- HTML is generally enhanced with CSS, which does the finishing work of adding colors, and borders and moving the elements into position.
- HTML is written in “tags” that start and close with angle brackes < >. You may remember them from grade school as greater than and less than.
- Anything inside the angle brackets is like prompts in a play, they don’t show on the screen, they tell the browser what to show.
- The beginning and end of the HTML code look like this:
- The second tag with the / turns off the first tag. In this case, it allows the HTML parser to go take a coffee break because its work is done.
- The HTML tag turns on the HTML parser, which is a part of the browser that takes the HTML code, checks that it’s correct and prepares it for the browser to turn into a web page.
- The next tag is the <head>, which goes inside the <html>. The head tag has instructions and links to tools that the browser needs before it can build the page.
- The 3rd main tag in the structure is the <body>. Once all the tools are lined up, the body tag contains the specific items that will show on the page.