Written by David Kelly
I have two opinions regarding Web Coding:
With that, I offer a few tips on basic HTML5 syntax and some keyboard shortcuts that will make the struggle a little easier. And I highly recommend spending some time at https://www.w3schools.com/html/; this is where I learned most of what I will share.
Web coding terms like tag, element, block, article, section, and span all refer to a “container” that can be empty, or have any number of “containers” inside. Commonly referred to as nesting, web page organization is essential to correctly display text and images, and can metaphorically be described as a sandwich, a set of space-saving Tupperware, or a topographical map.
Where to start:
The first thing is to create a file with the .html extension. I found Notepad++ to be very helpful because it recognizes web code file types, and colors the text according to purpose.
The beginning of your code should:
The <head> section:
Metadata and references are in the <head> section. The code in the head section is not displayed in the browser window, but is used for recording information and characteristic presets that can be accessed by the writer and user, alike. An example of metadata follows:
The <head> is also where “Internal” Cascading Style Sheets (CSS) code can be written for use by any of the webpage elements in the <body> section. You can predefine the text for headings, paragraphs, and links, as well as, the size, border, and spacing of your HTML containers by defining classes in a <style> section inside the <head>. All elements have default styles, so CSS in the head section is not needed for a page to display.
The <body> section:
This is where all the visible pieces of your web code go. The <body> is described with a left-to-right, top-to-bottom method; that can be measured in units of pixels or percentage. There are a few ways to arrange the content of your webpage:
There are many layout templates available, from basic to complex, and in numerous themes. But you need to have a little experience to change the template’s contents and make it your own. It can get complicated very quickly, so I recommend starting simple.
A good source for layout templates that use CSS is, again, w3schools: https://www.w3schools.com/w3css/w3css_templates.asp
Now to some of the nitty gritty details of how each element can look.
<tag attr1=”value” attr2=”value” style=”prop1,prop2:value;”>content</tag>
Here is a cheat sheet of HTML5 element tag names and descriptions:
W3schools has a nice reference site for tag names, attributes, colors, and everything HTML:
While working on web code, switching between windows and tabs is a constant, so here are a few shortcuts I used all the time:
Here is a link for more keyboard shortcuts from w3schools: