HTML: From None to SomeRead Now
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:
5/6/2017 08:10:29 pm
This is a great introduction to the basics of HTML web coding. I liked the way you put coding in terms of good grammar and vocabulary. The break down and explanation of the head, style and body as well as the additional semantic elements of HTML5 are helpful in understanding exactly what each component of the web page is and what you are trying to accomplish with each when you are writing code for that particular page section. Great info, thanks for sharing.
5/17/2017 05:52:08 pm
I really like how you broke this down! It is really helpful and I feel a little less intimidated by HTML after reading through your post. I agree that it is a good time to start learning code because there are so many tutorials and help pages out there get you started and guide your efforts.
5/18/2017 02:50:42 pm
Thanks David. Very clear and easy to understand. It can be really nice getting this kind of technical info from a fellow student, as opposed to reading online articles which can be overly complicated for beginners. I appreciate the links as well, and I'm looking forward to having some spare time to start studying on w3 schools.
5/28/2017 02:17:53 pm
I find coding hard to get started with but addictive once you understand a little bit of it. I also notice that there are many many guides to getting over that first hump of knowledge and this blog post is a good step in that direction.
Leave a Reply.
Blog posts are written by students in the Interactive Map Design course at Portland Community College.