We are a web design and maintenece company
So far our major clients include a congregational website, an electrican's CV, and a Mobile US Services start up. Oawesom3 is learning to program in a few languages. You will find that most of these pages are explicit or supplamental tutorials. I do hope they help you, him, or someone.
The previous column was a proof of concept for vertical buttons. Just add a [p] tag to the front was my theory. They are also of simplified button structure to facilitate adding more links quickly.There is more than one way to change the background. This page utilized in-line class and style elements when defining the [body] tag. That almost seems like a pre-lude to css from html. This conceptually makes sense as this tag is something that applies to the whole body. If not defined in the body tag, you can use a css style element in the head.
Sidebar/menu - page links are easier to visualize in a container, however the default menu was getting stuck. You probably should... revisit the original template as the menu orignally worked. You probably deleted part of the javascript code. Think about static side bar. Make sure you have a way to close menu on small and large screens.
Leave the block or divider and the javascript for an animated or closing menu. Remember, part of the script needs to remain in the HEAD. I will note the original instructin to hide the "font awesome x" was removed [w3-hide-large]. However, the original three-bar menu was replaced with the one now in use. Also, full blocks often start and end with [div] and [/div] respecitvely. You can also use these divider tags to color a particular section.
We arbitrailly called this section "#midpage" to show you how to make midpage point to the correct spot. Do you see that I did it again? Thus, there are actually two spepare links to this paragraph or spot. In making paragraph or anchor markers - setting the links or [a href=]'s should be obvious. Or, they are possibly familar from common use? Either way, the part that I kept missing is the [h4 id=] or [h2 id=]. You are placing the id as a normal header atribute like a class or style. So, then - the link will point to the header or tag with that particular id. In other words, the link may come first (in menus or other navigational aids). Then, you match it [by calling it the same name minus the #] to the correct id for you destination or 'pagemark' to work. Or, you are defining/declaring the id at the place that it actually occurs. This can be done at the [p] paragraph level too... (as we did for this paragraph). However, let us try to keep our indexing simple.
This tutorial built on the concept of link text and buttons [the a hrefs=] to another place on the same page using [id="midpage"] and [id="p3"] statements. We placed these 'anchors' inside of headers and tags. You can right click or use the non-standard mouse button (for you lefty's) to view this pages' source html. There are more notes displayed in html note - notation. You can download it as text file by clicking here. [link not active yet].
Of cousrse, there are annotations and notes that are not shown by the browser. These are ways programmers communicate important blocks, changes, conventions, and help themself get back on track. I will note that there are several html tags and notes that were placed in [square brackets] on this page instead of [angle] brackets. I did this so that you can read them in your browser without having to view the page source. Otherwise, these pieces of html would do their function in the background and would leave no visible cue. Conceptually you may not know what I am talking about right now. That is OK - just believe me - there are notes hidden all over this page and even metadata.
If you want some specific examples: [Overlay effect when opening sidebar on small screens -removed] [!PAGE CONTENT! includes header; these are the buttons at the top]. Those notes came from 'above' the buttons at the top.. I bet you did not see them up there! Similarly, this is the case with [a href="#midpage"] pointing to [h4 id="#midpage"]. And, [a href="#para7"] pointing to [h5 id="#para7"]. You do not see the background 'links' or instructions - you just click the link - and if all is well - you are taken to the anchor. Either way - I am subbing angle for [] to make more of those things visible.